/* ==========================================================================
   Aliya's Beauty — the app
   --------------------------------------------------------------------------
   Every page outside the landing page and the booking flow: public pages,
   sign-in, the client area and the staff portal. Markup comes from
   inc/app/shell.php; behaviour from script/app/main.js.

   Built on the abx design system (css/ds/aliya-ds.css), the landing page's
   frame (css/landing.css: tokens, type, top bar, menu, cookie notice) and the
   shared controls and sheets (css/kit.css). Anything added here is an --ax-*
   token or an .ax-* class; area stylesheets (css/app-public.css,
   css/app-client.css, css/app-staff.css) add what only their pages need.

   A page is a headline on the stage (.ax-hero, ink) and a sheet of paper
   (.ax-sheet) that carries everything else. Phone first: the sheet slides up
   over the hero and a tab bar sits on the bottom edge. From 62rem the hero
   becomes a fixed column on the left, with the tabs beneath the headline,
   and the sheet scrolls beside it.

   Sections: 1 Tokens · 2 Frame · 3 Page · 4 Type · 5 Surfaces · 6 Controls
             7 Wide screens · 8 Motion
   ========================================================================== */

/* 1. TOKENS ================================================================ */

.abx-app.alt.ax {
  --ax-sheet: var(--abx-beige-100);
  --ax-card: var(--abx-beige-50);
  --ax-amber: #a8551b;
  --ax-good: #1f6f3a;

  --ax-gutter: clamp(1.25rem, 5.4vw, 2rem);
  --ax-radius: clamp(1.5rem, 6vw, 2rem);
  --ax-safe-b: env(safe-area-inset-bottom, 0px);
  --ax-tabs-h: 0px;

  --ax-fs-title: clamp(2.1rem, min(10.2vw, calc(var(--alt-vh) * 6.6)), 3.4rem);
  /* The room kept above the headline for the stage's figure. */
  --ax-figure-h: clamp(1.75rem, calc(var(--alt-vh) * 5.5), 4rem);

  --ax-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* The shared controls and sheets (css/kit.css) follow the page's measures. */
  --kit-sheet: var(--ax-sheet);
  --kit-card: var(--ax-card);
  --kit-gutter: var(--ax-gutter);
  --kit-radius: var(--ax-radius);
  --kit-dock-h: var(--ax-tabs-h);

  min-height: 100vh;
  min-height: 100svh;
  overscroll-behavior-y: none;
}

.abx-app.alt.ax--tabbed {
  --ax-tabs-h: 4rem;
}

.abx-app.alt.ax--hero-tall {
  --ax-fs-title: clamp(2.4rem, min(11.4vw, calc(var(--alt-vh) * 7.4)), 4rem);
  --ax-figure-h: clamp(7rem, calc(var(--alt-vh) * 25), 16rem);
}

/* Paper surfaces: dark type, light cards. Ink surfaces flip the same tokens
   (the [data-tone] rules in landing.css do the same for the landing page). */
.ax .ax-sheet,
.ax .ax-paper {
  --abx-text: var(--abx-ink-900);
  --abx-text-muted: var(--abx-ink-500);
  --abx-text-subtle: var(--abx-ink-400);
  --abx-accent: var(--abx-ink-900);
  --abx-accent-hover: #2c2b27;
  --abx-inverse: var(--abx-beige-300);
  --abx-on-accent: var(--abx-beige-100);
  --abx-border: rgba(23, 23, 22, 0.1);
  --abx-border-strong: rgba(23, 23, 22, 0.22);
  --abx-surface-sunken: rgba(23, 23, 22, 0.05);
  --abx-surface-solid: var(--ax-card);
  --abx-focus: #4459d0;
  color: var(--abx-text);
}

.ax .ax-hero,
.ax .ax-tabs,
.ax .ax-ink {
  --abx-text: var(--abx-beige-300);
  --abx-text-muted: rgba(214, 211, 205, 0.76);
  --abx-text-subtle: rgba(214, 211, 205, 0.52);
  --abx-accent: var(--abx-beige-300);
  --abx-accent-hover: var(--abx-beige-50);
  --abx-inverse: var(--abx-ink-900);
  --abx-on-accent: var(--abx-ink-900);
  --abx-border: rgba(214, 211, 205, 0.16);
  --abx-border-strong: rgba(214, 211, 205, 0.34);
  --abx-surface-sunken: rgba(214, 211, 205, 0.09);
  --abx-surface-solid: #201f1d;
  --abx-focus: #aab6ff;
  color: var(--abx-text);
}

/* 2. FRAME ================================================================= */

.ax [hidden] {
  display: none !important;
}

.ax button,
.ax a,
.ax summary,
.ax [role="button"],
.ax [role="tab"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ax textarea,
.ax select,
.ax input {
  font: inherit;
  color: inherit;
}

.ax img,
.ax svg {
  max-width: 100%;
}

/* Icons (inc/app/icons.php). */
.ax-i {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.ax-i--sm {
  width: 1rem;
  height: 1rem;
}

.ax-i--lg {
  width: 1.6rem;
  height: 1.6rem;
}

/* The stage. Hidden until script/app/stage.js has a first frame to show;
   until then, and for good where WebGL or motion is unavailable, the hero
   paints its own quiet version of the same light. */
.ax-stage {
  position: fixed;
  inset: 0 0 auto;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.9s var(--abx-ease), visibility 0s 0.9s;
}

html.ax-staged .ax-stage {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* An element exactly one small-viewport tall, for the stage to measure. */
.ax-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  height: 100svh;
  visibility: hidden;
  pointer-events: none;
}

/* The bar stays put: bare over the hero, and the sheet's colour once the
   sheet has slid beneath it. */
.abx-app.ax .ax-bar {
  position: fixed;
}

.ax-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ax-sheet);
  box-shadow: 0 1px 0 rgba(23, 23, 22, 0.08);
  opacity: 0;
  transition: opacity var(--abx-dur-2) var(--abx-ease);
}

html[data-alt-top="paper"] .ax-bar::before {
  opacity: 1;
}

html.alt-menu-open .ax-bar::before {
  opacity: 0;
}

.ax .ax-bar__book {
  height: 2.5rem;
  padding: 0 1.2rem;
}

/* The menu's grouped half (staff): everything that is not a headline link. */
.ax-menu--grouped .alt-menu__list a {
  font-size: clamp(2rem, min(8.4vw, calc(var(--alt-vh) * 7.4)), 4.25rem);
}

.ax-menu__note {
  margin-left: 0.5rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--abx-text-muted);
}

.ax-menu .alt-menu__list a[aria-current="page"] .alt-menu__no {
  color: var(--abx-text);
}

.ax-menu__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.25rem;
  margin-top: clamp(1.5rem, calc(var(--alt-vh) * 4), 2.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--abx-border);
  opacity: 0;
  transition: opacity 0.6s var(--abx-ease);
}

.alt-menu.is-open .ax-menu__groups {
  opacity: 1;
  transition-delay: 0.4s;
}

.ax-menu__group {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-width: 0;
}

.ax-menu__group ul {
  display: grid;
  gap: 0.15rem;
}

.ax-menu__group a {
  display: grid;
  gap: 0.1rem;
  padding: 0.45rem 0;
  font-family: var(--abx-font-display);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
}

.ax-menu__group a small {
  font-family: var(--abx-font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--abx-text-subtle);
}

.ax-menu__group a[aria-current="page"] span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (hover: hover) {
  .ax-menu__group a:hover span {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

@media (min-width: 56rem) {
  .ax-menu--grouped {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  .ax-menu--grouped .alt-menu__nav {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 0 clamp(2rem, 5vw, 5rem);
    align-items: start;
  }

  .ax-menu--grouped .ax-menu__groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-row: span 2;
    margin-top: 0.75rem;
    padding-top: 0;
    border-top: 0;
  }
}

/* The tab bar: where this audience lives. */
.ax-tabs {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  height: calc(var(--ax-tabs-h) + var(--ax-safe-b));
  padding: 0 max(0.35rem, env(safe-area-inset-right)) var(--ax-safe-b) max(0.35rem, env(safe-area-inset-left));
  background: var(--alt-ink);
  box-shadow: 0 -1px 0 rgba(214, 211, 205, 0.12), 0 -0.75rem 2rem rgba(0, 0, 0, 0.18);
}

.ax-tabs ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  height: var(--ax-tabs-h);
  max-width: 34rem;
  margin-inline: auto;
}

.ax-tabs li {
  display: grid;
}

.ax-tab {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.28rem;
  min-width: 0;
  color: var(--abx-text-subtle);
  font-family: var(--abx-font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  transition: color var(--abx-dur-2) var(--abx-ease);
}

.ax .ax-tab {
  color: var(--abx-text-subtle);
  font-family: var(--abx-font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.ax-tab .ax-i {
  width: 1.4rem;
  height: 1.4rem;
  transition: transform var(--abx-dur-2) var(--abx-ease-spring);
}

.ax .ax-tab[aria-current="page"] {
  color: var(--abx-text);
}

.ax-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.5rem;
  height: 2px;
  margin-left: -0.75rem;
  border-radius: 0 0 2px 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--abx-dur-3) var(--ax-ease);
}

.ax-tab[aria-current="page"]::before {
  transform: none;
}

.ax-tab:active .ax-i {
  transform: scale(0.88);
}

/* The one action this audience came for (clients: book). */
.ax .ax-tab--primary {
  color: var(--abx-text);
}

.ax-tab--primary .ax-i {
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -0.2rem;
  padding: 0.6rem;
  border-radius: 50%;
  background: var(--abx-beige-300);
  color: var(--abx-ink-900);
}

.ax-tab--primary::before {
  display: none;
}

.ax-tab--primary span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Notices clear the tab bar. */
.ax .ax-cookie {
  bottom: calc(var(--ax-tabs-h) + var(--ax-safe-b) + 0.75rem);
  z-index: 34;
  animation-delay: 1.2s;
}

/* "Ask the Agent" (inc/clientAgentPanel.php, staffAgentPanel.php): a round
   launcher above the tab bar, and the chat in a sheet. */
.ax .abx-agent-panel__launcher {
  right: 0.9rem;
  bottom: calc(var(--ax-tabs-h) + var(--ax-safe-b) + 0.9rem);
  z-index: 33;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgba(214, 211, 205, 0.22);
  background: var(--abx-ink-900);
  color: var(--abx-beige-300);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.28);
  transition: transform var(--abx-dur-2) var(--abx-ease-spring);
}

.ax .abx-agent-panel__launcher:active {
  transform: scale(0.92);
}

.ax .abx-agent-panel__launcher svg {
  width: 1.45rem;
  height: 1.45rem;
}

.ax .abx-agent-panel__backdrop {
  z-index: 70;
  background: rgba(23, 23, 22, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.ax .abx-agent-panel__sheet {
  inset: auto 0 0;
  z-index: 71;
  width: 100%;
  height: calc(100vh - 3.5rem);
  height: calc(100dvh - env(safe-area-inset-top, 0px) - 2.5rem);
  border-radius: var(--ax-radius) var(--ax-radius) 0 0;
  background: var(--ax-sheet);
  box-shadow: 0 -1.5rem 4rem rgba(0, 0, 0, 0.4);
  animation: ax-dialog-in 0.5s var(--ax-ease);
}

.ax .abx-agent-panel__header {
  flex: none;
  min-height: 3.5rem;
  padding: 0.5rem 0.75rem 0.5rem var(--ax-gutter);
  border-bottom: 1px solid rgba(23, 23, 22, 0.1);
  background: var(--ax-sheet);
  color: var(--abx-ink-900);
  font-family: var(--alt-serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}

.ax .abx-agent-panel__header > span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.ax .abx-agent-panel__close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(23, 23, 22, 0.05);
  color: var(--abx-ink-900);
}

/* 3. PAGE ================================================================== */

.ax-main.alt-main {
  z-index: auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

/* Hero: transparent, so the stage shows through. (Isolated, so its still
   backdrop — a layer behind its own content — is not also behind <body>.) */
.ax-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(var(--ax-figure-h), 1fr) auto;
  flex: none;
  padding: calc(var(--alt-bar-h) + env(safe-area-inset-top, 0px)) var(--ax-gutter) calc(var(--ax-radius) * 0.5 + 1.1rem);
}

/* The still backdrop: a warm light on ink, where the stage's figure would
   be. It gives way once the canvas has a frame to show. */
.ax-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(46% 5% at 50% 30%, rgba(255, 237, 204, 0.36), rgba(255, 237, 204, 0) 72%),
    radial-gradient(120% 62% at 50% 30%, rgba(255, 237, 204, 0.17), rgba(255, 237, 204, 0) 64%);
  pointer-events: none;
  transition: opacity 0.9s var(--abx-ease);
}

html.ax-staged .ax-hero::before {
  opacity: 0;
}

/* (Stated with the scope class so the old stylesheet's
   "header:not(.site-header)" sizing cannot shrink them where it is loaded.) */
.ax .ax-hero {
  width: auto;
  height: auto;
}

.ax .ax-bar {
  width: auto;
  height: var(--alt-bar-h);
}

/* An empty box the stage's figure is fitted into. On a phone it reaches up
   behind the bar, between the wordmark and the menu, where nothing else is. */
.ax-anchor {
  min-height: 0;
  margin-top: calc(var(--alt-bar-h) * -0.34);
  pointer-events: none;
}

.ax-hero__copy {
  display: grid;
  gap: clamp(0.45rem, calc(var(--alt-vh) * 1.2), 0.85rem);
  min-width: 0;
}

.ax-title {
  font-family: var(--alt-serif);
  font-size: var(--ax-fs-title);
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.ax-hero .alt-lede {
  max-width: 34ch;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(214, 211, 205, 0.84);
}

.ax .ax-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  min-height: 2.25rem;
  margin-bottom: 0.15rem;
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.ax-hero__slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

/* A few facts in the hero: "3 visits · £120 spent". */
.ax-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  font-size: 0.9rem;
  color: var(--abx-text-muted);
}

.ax-facts b {
  font-family: var(--abx-font-display);
  font-weight: 600;
  color: var(--abx-text);
  font-variant-numeric: tabular-nums;
}

/* The sheet of paper the page is written on. */
.ax-sheet {
  position: relative;
  /* No z-index: pop-ups that pages keep inside the sheet (confirm dialogs,
     windows, toasts) must be able to rise above the bar and the tab bar. */
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  margin-top: calc(var(--ax-radius) * -0.5);
  padding-bottom: calc(var(--ax-tabs-h) + var(--ax-safe-b));
  border-radius: var(--ax-radius) var(--ax-radius) 0 0;
  background: var(--ax-sheet);
  box-shadow: 0 -1.25rem 3rem rgba(0, 0, 0, 0.28);
}

.ax-sheet__inner {
  display: grid;
  flex: 1 0 auto;
  align-content: start;
  gap: clamp(1.5rem, 6vw, 2rem);
  padding: clamp(1.4rem, 6vw, 2rem) var(--ax-gutter) 2.5rem;
}

.ax-sheet__inner > * {
  min-width: 0;
}

/* Reading and form pages keep to a comfortable measure. */
.ax--narrow .ax-sheet__inner > *,
.ax--narrow .ax-foot > * {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
}

/* No hero (the agent's chat, embedded panels): the sheet is the page. */
.ax--hero-none .ax-sheet {
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
}

.ax--hero-none:not(.ax--embedded) .ax-sheet__inner {
  padding-top: calc(var(--alt-bar-h) + env(safe-area-inset-top, 0px) + 0.75rem);
}

.ax--embedded .ax-sheet {
  padding-bottom: 0;
}

/* Foot of the sheet: a way to reach the salon, and the small print. */
.ax-foot {
  display: grid;
  gap: 0.9rem;
  padding: 1.75rem var(--ax-gutter) 2rem;
  border-top: 1px solid var(--abx-border);
  font-size: var(--abx-fs-100);
  color: var(--abx-text-muted);
}

.ax-foot__help a {
  color: var(--abx-text);
  font-weight: 500;
  white-space: nowrap;
}

.ax-foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font-size: var(--abx-fs-50);
}

.ax-foot__legal span {
  margin-left: auto;
}

@media (hover: hover) {
  .ax-foot a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

/* The public footer is the landing page's; here it follows a sheet. */
.ax-footer {
  padding-bottom: calc(var(--ax-tabs-h) + max(2rem, env(safe-area-inset-bottom)));
}

.ax-footer__hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--abx-text-muted);
  font-variant-numeric: tabular-nums;
}

.ax-footer__hours li.is-today {
  color: var(--abx-text);
}

/* 4. TYPE ================================================================== */

.ax-h2 {
  font-family: var(--alt-serif);
  font-size: clamp(1.75rem, 7.6vw, 2.3rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.ax-h3 {
  font-family: var(--abx-font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
}

.ax-eyebrow {
  font-family: var(--abx-font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--abx-text-muted);
}

.ax-text {
  line-height: 1.55;
  color: var(--abx-text-muted);
  text-wrap: pretty;
}

.ax-text--sm {
  font-size: 0.88rem;
  line-height: 1.5;
}

.ax .ax-text a,
.ax .ax-link {
  color: var(--abx-text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ax-num {
  font-family: var(--alt-serif);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ax-money {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* "View all →" */
.ax .ax-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  font-family: var(--abx-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abx-text);
}

.ax-more .ax-i {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform var(--abx-dur-3) var(--ax-ease);
}

@media (hover: hover) {
  .ax-more:hover .ax-i {
    transform: translateX(0.25rem);
  }
}

/* Long-form copy: policies, articles. */
.ax-prose {
  display: grid;
  gap: 1rem;
  max-width: 68ch;
  font-size: 1.02rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.ax-prose > * {
  min-width: 0;
}

.ax-prose h2 {
  margin-top: 1.25rem;
  font-family: var(--alt-serif);
  font-size: clamp(1.6rem, 6.6vw, 2rem);
  line-height: 1.06;
}

.ax-prose h3 {
  margin-top: 0.5rem;
  font-family: var(--abx-font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
}

.ax .ax-prose ul,
.ax .ax-prose ol {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.ax .ax-prose ol {
  list-style: decimal;
}

.ax .ax-prose a {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ax-prose strong {
  font-weight: 500;
}

.ax-prose img {
  border-radius: var(--abx-radius-lg);
}

/* 5. SURFACES ============================================================== */

.ax-stack {
  display: grid;
  gap: clamp(1.5rem, 6vw, 2rem);
}

.ax-stack--tight {
  gap: 0.75rem;
}

.ax-stack > * {
  min-width: 0;
}

.ax-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.ax-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

/* A titled part of the page. */
.ax-section {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

.ax-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.ax-section__head > :first-child {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.ax-card {
  position: relative;
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  padding: 1.15rem 1.1rem;
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--ax-card);
}

.ax-card > * {
  min-width: 0;
}

.ax-card--flat {
  background: transparent;
}

.ax-card--pad0 {
  padding: 0;
  overflow: hidden;
}

.ax-card.ax-ink {
  border-color: transparent;
  background: var(--abx-ink-900);
}

.ax-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* Rows: a list of things with a line between each. */
.ax-rows {
  display: grid;
  min-width: 0;
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--ax-card);
  overflow: hidden;
}

.ax-rows--bare {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.ax-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  min-height: 4rem;
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--abx-border);
  text-align: left;
}

.ax-row:first-child {
  border-top: 0;
}

.ax-rows--bare .ax-row {
  padding-inline: 0;
}

.ax a.ax-row,
.ax button.ax-row {
  width: 100%;
  transition: background-color var(--abx-dur-1) var(--abx-ease);
}

.ax a.ax-row:active,
.ax button.ax-row:active {
  background: var(--abx-surface-sunken);
}

@media (hover: hover) {
  .ax a.ax-row:hover,
  .ax button.ax-row:hover {
    background: var(--abx-surface-sunken);
  }
}

.ax-row__body {
  display: grid;
  flex: 1;
  gap: 0.15rem;
  min-width: 0;
}

.ax-row__title {
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ax-row__sub {
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--abx-text-muted);
  overflow-wrap: anywhere;
}

.ax-row__trail {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  color: var(--abx-text-muted);
  font-variant-numeric: tabular-nums;
}

/* A day torn from a calendar: "OCT / 16". */
.ax-leaf {
  display: grid;
  flex: none;
  justify-items: center;
  align-content: center;
  gap: 0.1rem;
  width: 3rem;
  height: 3.25rem;
  border-radius: 0.8rem;
  background: var(--abx-surface-sunken);
  line-height: 1;
}

.ax-leaf small {
  font-family: var(--abx-font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.ax-leaf b {
  font-family: var(--alt-serif);
  font-size: 1.45rem;
  font-weight: 400;
}

.ax-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--abx-surface-sunken) center / cover no-repeat;
  font-family: var(--abx-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--abx-text);
  overflow: hidden;
}

.ax-avatar--lg {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.3rem;
}

/* Figures. */
.ax-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.ax-stat {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.95rem 1rem 1rem;
  border: 1px solid var(--abx-border);
  border-radius: 1.1rem;
  background: var(--ax-card);
}

.ax-stat--wide {
  grid-column: 1 / -1;
}

.ax-stat__value {
  font-family: var(--alt-serif);
  font-size: clamp(1.7rem, 7.6vw, 2.25rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.ax-stat__sub {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--abx-text-muted);
}

/* Small labels on things: status, counts. */
.ax-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.6rem;
  padding: 0 0.65rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--abx-text-muted);
}

.ax-chip--ink {
  border-color: transparent;
  background: var(--abx-accent);
  color: var(--abx-on-accent);
}

.ax-chip--good {
  border-color: rgba(31, 111, 58, 0.32);
  background: rgba(31, 111, 58, 0.1);
  color: #17502b;
}

.ax-chip--warn {
  border-color: rgba(168, 85, 27, 0.34);
  background: rgba(168, 85, 27, 0.1);
  color: #7a3d10;
}

.ax-chip--bad {
  border-color: var(--abx-danger-border);
  background: var(--abx-danger-soft);
  color: var(--abx-danger);
}

/* Nothing here yet. */
.ax-empty {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 2.25rem 1.25rem;
  border: 1px dashed var(--abx-border-strong);
  border-radius: var(--abx-radius-lg);
  text-align: center;
}

.ax-empty > .ax-i {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--abx-text-subtle);
}

.ax-empty__title {
  font-family: var(--alt-serif);
  font-size: 1.75rem;
  line-height: 1.04;
}

.ax-empty p {
  max-width: 30ch;
  line-height: 1.5;
  color: var(--abx-text-muted);
}

/* Notes. */
.ax-note {
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  background: var(--abx-surface-sunken);
  font-size: 0.92rem;
  line-height: 1.5;
}

.ax-note--good {
  background: rgba(31, 111, 58, 0.1);
  color: #17502b;
}

.ax-note--warn {
  background: rgba(168, 85, 27, 0.1);
  color: #6b360f;
}

.ax-note--bad {
  background: var(--abx-danger-soft);
  color: var(--abx-danger);
}

.ax-note > strong:first-child {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--abx-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* "Confirm your email" (inc/client/verifyEmailNotice.php). */
.ax-verify-email__form {
  margin-top: 0.75rem;
}

.ax .ax-note a {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Fold-away sections. */
.ax-fold {
  border-top: 1px solid var(--abx-border);
}

.ax-fold:last-of-type {
  border-bottom: 1px solid var(--abx-border);
}

.ax-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  font-family: var(--abx-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.ax-fold > summary::-webkit-details-marker {
  display: none;
}

.ax-fold > summary i {
  position: relative;
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
}

.ax-fold > summary i::before,
.ax-fold > summary i::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--abx-dur-2) var(--abx-ease);
}

.ax-fold > summary i::after {
  transform: rotate(90deg);
}

.ax-fold[open] > summary i::after {
  transform: rotate(0deg);
}

.ax-fold__body {
  display: grid;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  line-height: 1.55;
  color: var(--abx-text-muted);
}

/* Label / value pairs. */
.ax-pairs {
  display: grid;
  gap: 0;
}

.ax-pairs > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.8fr) minmax(0, 1.6fr);
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--abx-border);
  line-height: 1.4;
}

.ax-pairs > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.ax-pairs dt {
  padding-top: 0.2rem;
  font-family: var(--abx-font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.ax-pairs dd {
  overflow-wrap: anywhere;
}

/* Tables: scroll sideways where they cannot be cards. */
.ax-table-wrap {
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--ax-card);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ax-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.4;
}

.ax-table th,
.ax-table td {
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--abx-border);
  text-align: left;
  vertical-align: top;
}

.ax-table thead th {
  border-top: 0;
  font-family: var(--abx-font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--abx-text-muted);
}

.ax-table td.is-num,
.ax-table th.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A ticket: one appointment, torn along the line between when and what. */
.ax-ticket {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0 1.25rem;
  border-radius: var(--abx-radius-lg);
  background: var(--ax-card);
  box-shadow: 0 1px 0 rgba(23, 23, 22, 0.06), 0 1.25rem 2.5rem -1.5rem rgba(23, 23, 22, 0.28);
}

.ax-ticket__when {
  display: grid;
  gap: 0.5rem;
  padding: 1.35rem 0 1.25rem;
}

.ax-ticket__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ax-ticket__date {
  font-family: var(--alt-serif);
  font-size: clamp(2rem, 9.8vw, 2.8rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
}

.ax-ticket__time {
  font-family: var(--abx-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ax-ticket__part {
  position: relative;
  display: grid;
  gap: 0.6rem;
  padding: 1.15rem 0;
  border-top: 1px dashed var(--abx-border-strong);
}

.ax-ticket__when + .ax-ticket__part::before,
.ax-ticket__when + .ax-ticket__part::after {
  content: '';
  position: absolute;
  top: -0.6rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--ax-sheet);
}

.ax-ticket__when + .ax-ticket__part::before {
  left: -1.85rem;
}

.ax-ticket__when + .ax-ticket__part::after {
  right: -1.85rem;
}

/* Name on the left, figure on the right. */
.ax-lines {
  display: grid;
  gap: 0.5rem;
}

.ax-lines li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  line-height: 1.35;
}

.ax-lines li > :last-child:not(:first-child) {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ax-lines small {
  display: block;
  font-size: var(--abx-fs-50);
  letter-spacing: 0.04em;
  color: var(--abx-text-muted);
}

.ax-lines--total {
  padding-top: 0.75rem;
  border-top: 1px solid var(--abx-border);
  font-family: var(--abx-font-display);
  font-weight: 600;
}

/* Something to confirm: a sheet from the bottom edge on a phone, a card in
   the middle from a tablet up. A native <dialog>, opened with showModal(). */
.ax .ax-dialog {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - 2.5rem);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ax-radius) var(--ax-radius) 0 0;
  background: var(--ax-sheet);
  color: var(--abx-ink-900);
  box-shadow: 0 -1.5rem 4rem rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ax-dialog::backdrop {
  background: rgba(23, 23, 22, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.ax-dialog[open] {
  animation: ax-dialog-in 0.5s var(--ax-ease);
}

.ax-dialog[open]::backdrop {
  animation: ax-fade 0.3s var(--abx-ease);
}

.ax-dialog__inner {
  display: grid;
  gap: 1.1rem;
  padding: 1.75rem var(--ax-gutter) calc(1.5rem + var(--ax-safe-b));
}

.ax-dialog__title {
  font-family: var(--alt-serif);
  font-size: clamp(1.8rem, 8vw, 2.2rem);
  line-height: 1.02;
  text-wrap: balance;
}

@keyframes ax-dialog-in {
  from {
    transform: translateY(2.5rem);
    opacity: 0;
  }
}

@media (min-width: 40rem) {
  .ax .ax-dialog {
    inset: 0;
    width: min(30rem, calc(100% - 3rem));
    height: fit-content;
    margin: auto;
    border-radius: var(--ax-radius);
  }

  .ax-dialog__inner {
    padding-bottom: 1.75rem;
  }
}

/* 6. CONTROLS ============================================================== */

/* Buttons are css/kit.css's .cta; these are the app's extra sizes and tones. */
.ax .cta.small {
  min-height: 2.5rem;
  padding: 0 1.1rem;
  font-size: 0.85rem;
}

.ax .cta.block {
  width: 100%;
}

.ax .cta.ghost {
  background: var(--abx-surface-sunken);
  color: var(--abx-text);
}

.ax .cta.danger {
  border-color: var(--abx-danger-border);
  background: transparent;
  color: var(--abx-danger);
}

.ax .cta.danger.primary {
  border-color: transparent;
  background: var(--abx-danger);
  color: #fff;
}

.ax button.cta,
.ax a.cta {
  text-decoration: none;
}

.ax .cta:disabled,
.ax .cta[aria-disabled="true"] {
  opacity: 0.36;
  pointer-events: none;
}

.ax-actions {
  display: grid;
  gap: 0.6rem;
}

.ax-actions--row {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.ax-iconbtn {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: 50%;
  color: var(--abx-text);
  transition: background-color var(--abx-dur-2) var(--abx-ease), transform var(--abx-dur-1) var(--abx-ease);
}

.ax-iconbtn:active {
  transform: scale(0.94);
}

.ax-iconbtn--solid {
  border-color: transparent;
  background: var(--abx-accent);
  color: var(--abx-on-accent);
}

@media (hover: hover) {
  .ax-iconbtn:not(.ax-iconbtn--solid):hover {
    background: var(--abx-surface-sunken);
  }
}

/* Fields outside script.js's .data-field wrapper. */
.ax-field {
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
}

.ax-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 0.75rem;
}

.ax-fields > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.ax-fields > .ax-field--half {
  grid-column: auto;
}

.ax-input,
.ax-select,
.ax-textarea {
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: 0.9rem;
  background: var(--ax-card);
  color: var(--abx-text);
  /* 16px or more, so iOS does not zoom the page when a field is focused. */
  font-size: 1.0625rem;
  line-height: 1.35;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--abx-dur-2) var(--abx-ease), box-shadow var(--abx-dur-2) var(--abx-ease);
}

.ax-textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.ax-select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171716' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 9 6.5 6.5L18.5 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 1.05rem;
  text-overflow: ellipsis;
}

/* landing.css gives everything with keyboard focus a 2px-radius ring; these
   keep their own shape and show focus with their border instead. */
.ax .ax-input,
.ax .ax-select,
.ax .ax-textarea {
  border-radius: 0.9rem;
  outline: none;
}

.ax .ax-iconbtn,
.ax .ax-avatar {
  border-radius: 50%;
}

.ax .ax-switch input {
  border-radius: var(--abx-radius-pill);
}

.ax-input::placeholder,
.ax-textarea::placeholder {
  color: var(--abx-text-subtle);
}

.ax-input:focus,
.ax-select:focus,
.ax-textarea:focus {
  border-color: var(--abx-ink-900);
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 23, 22, 0.1);
}

.ax-input:disabled,
.ax-select:disabled,
.ax-textarea:disabled,
.ax-input[readonly] {
  background: var(--abx-surface-sunken);
  color: var(--abx-text-muted);
}

.ax-input.is-invalid,
.ax-select.is-invalid,
.ax-textarea.is-invalid {
  border-color: var(--abx-danger);
  box-shadow: 0 0 0 3px rgba(178, 58, 43, 0.12);
}

.ax-field__hint {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--abx-text-muted);
}

.ax-field__error {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--abx-danger);
}

/* Search: an input with a glass in it. */
.ax-search {
  position: relative;
  display: block;
}

.ax-search .ax-i {
  position: absolute;
  top: 50%;
  left: 1rem;
  margin-top: -0.625rem;
  color: var(--abx-text-muted);
  pointer-events: none;
}

.ax-search .ax-input {
  padding-left: 2.9rem;
  border-radius: var(--abx-radius-pill);
}

/* On / off. The label sits beside the switch; a line of explanation under. */
.ax-switch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 1rem;
  min-height: 3.25rem;
  margin: 0;
  font-family: var(--abx-font-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: var(--abx-text);
  cursor: pointer;
}

.ax .ax-switch {
  margin: 0;
  font-family: var(--abx-font-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--abx-text);
}

.ax-switch small {
  grid-column: 1;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--abx-text-muted);
}

.ax-switch input {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  flex: none;
  width: 3.1rem;
  height: 1.85rem;
  margin: 0;
  border: 1px solid var(--abx-border-strong);
  border-radius: var(--abx-radius-pill);
  background: var(--abx-beige-200);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--abx-dur-2) var(--abx-ease), border-color var(--abx-dur-2) var(--abx-ease);
}

.ax-switch input::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.17rem;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: -0.7rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(23, 23, 22, 0.28);
  transition: transform var(--abx-dur-2) var(--abx-ease-spring);
}

.ax-switch input:checked {
  border-color: var(--abx-ink-900);
  background: var(--abx-ink-900);
}

.ax-switch input:checked::after {
  transform: translateX(1.24rem);
}

.ax-switch input:disabled {
  opacity: 0.5;
  cursor: default;
}

/* One of a few: a row of pills, the chosen one filled. Also in-page tabs. */
.ax-seg {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--abx-radius-pill);
  background: var(--abx-surface-sunken);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ax-seg::-webkit-scrollbar {
  display: none;
}

.ax .ax-seg > * {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  margin: 0;
  padding: 0 1rem;
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  color: var(--abx-text-muted);
  cursor: pointer;
  transition: background-color var(--abx-dur-2) var(--abx-ease), color var(--abx-dur-2) var(--abx-ease);
}

.ax .ax-seg > [aria-selected="true"],
.ax .ax-seg > [aria-current="page"],
.ax .ax-seg > [aria-pressed="true"],
.ax .ax-seg > .is-active,
.ax .ax-seg > .active {
  background: var(--abx-ink-900);
  color: var(--abx-beige-100);
}

/* Filters: a row that scrolls sideways on a phone. */
.ax-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline: calc(var(--ax-gutter) * -1);
  padding-inline: var(--ax-gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ax-toolbar::-webkit-scrollbar {
  display: none;
}

.ax-toolbar > * {
  flex: none;
}

.ax-toolbar .ax-select,
.ax-toolbar .ax-input {
  width: auto;
  min-height: 2.75rem;
  padding-block: 0.5rem;
  border-radius: var(--abx-radius-pill);
  font-size: 1rem;
}

/* Finding things in a long list: a search box, with sorting and the other
   filters folded away beneath it (staff clients, issues, consent forms). */
.ax-finder {
  display: grid;
  gap: 0.75rem;
}

.ax-finder__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.ax-finder__top .cta {
  min-height: 3.25rem;
}

.ax .ax-finder__more,
.ax .ax-finder__more:last-of-type {
  border-block: 1px solid var(--abx-border);
}

.ax-finder__more > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.ax-finder__more .ax-fold__body {
  color: inherit;
}

.ax-finder__go {
  display: flex;
  justify-content: flex-end;
}

.ax .ax-finder__clear {
  justify-self: start;
}

@media (min-width: 40rem) {
  .ax-finder__more .ax-fields {
    grid-template-columns: repeat(var(--ax-finder-cols, 3), minmax(0, 1fr));
  }

  .ax-finder__more .ax-fields > .ax-field {
    grid-column: auto;
  }
}

/* Actions that stay in reach while a long form scrolls. */
.ax-dockbar {
  position: sticky;
  bottom: calc(var(--ax-tabs-h) + var(--ax-safe-b));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 calc(var(--ax-gutter) * -1) -2.5rem;
  padding: 0.75rem var(--ax-gutter);
  border-top: 1px solid var(--abx-border);
  background: rgba(244, 241, 235, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ax-dockbar .cta {
  flex: 1;
}

.ax-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--abx-text-muted);
}

/* 6b. EXISTING MARKUP ====================================================== */

/* Pages built on the design system's portal classes (abx-card, abx-btn,
   abx-field, toggles, toasts, confirm dialogs …) and markup that scripts
   generate with them. They keep those names; this dresses them for the
   frame above, so a page reads the same whether its markup is old or new. */

/* The old frame's page wrappers: the sheet does their job now. */
.ax .abx-app:not(.abx-agent-panel),
.ax .abx-simple-page,
.ax .abx-portal-page,
.ax .abx-staff-page {
  display: grid;
  gap: clamp(1.5rem, 6vw, 2rem);
  align-items: stretch;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  background: none;
  overflow: visible;
}

.ax .abx-simple-page > *,
.ax .abx-portal-page > *,
.ax .abx-staff-page > * {
  min-width: 0;
}

/* One column that can never be pushed wider than the screen by its content. */
.ax-sheet__inner,
.ax-stack,
.ax-section,
.ax .abx-app:not(.abx-agent-panel),
.ax .abx-simple-page,
.ax .abx-portal-page,
.ax .abx-staff-page {
  grid-template-columns: minmax(0, 1fr);
}

/* Fields that never had a class of their own: the same shape as .ax-input.
   (:where keeps this at the bottom of the cascade, so anything more specific
   — a page's own field style — still wins.) */
.ax .ax-sheet :where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="password"], input[type="search"], input[type="url"], select, textarea):where(:not([class])) {
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: 0.9rem;
  background-color: var(--ax-card);
  color: var(--abx-text);
  font-size: 1.0625rem;
  line-height: 1.35;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.ax .ax-sheet :where(input, select, textarea):where(:not([class])):focus {
  border-color: var(--abx-ink-900);
  box-shadow: 0 0 0 3px rgba(23, 23, 22, 0.1);
}

.ax .ax-sheet :where(textarea):where(:not([class])) {
  min-height: 6.5rem;
  resize: vertical;
}

/* What is left of an old page header: its actions, in a row. */
.ax .abx-staff-header {
  align-items: center;
  gap: 0.75rem;
}

.ax .abx-staff-header__actions {
  gap: 0.6rem;
}

/* Tables become a card per row on a phone: the first cell is the title, the
   rest are "LABEL … value" lines (labels from data-label). */
@media (max-width: 45.99rem) {
  .ax .abx-data-table-wrap {
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .ax .abx-data-table-wrap .abx-data-table,
  .ax .abx-data-table-wrap .abx-data-table tbody {
    display: block;
  }

  .ax .abx-data-table-wrap .abx-data-table thead {
    display: none;
  }

  .ax .abx-data-table-wrap .abx-data-table tr {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--abx-border);
    border-radius: var(--abx-radius-lg);
    background: var(--ax-card);
  }

  .ax .abx-data-table-wrap .abx-data-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: 0.95rem;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .ax .abx-data-table-wrap .abx-data-table td::before {
    flex: none;
    max-width: 45%;
    text-align: left;
  }

  .ax .abx-data-table-wrap .abx-data-table td:first-child,
  .ax .abx-data-table-wrap .abx-data-table td:not([data-label]) {
    display: block;
    text-align: left;
  }

  .ax .abx-data-table-wrap .abx-data-table td:first-child {
    padding-bottom: 0.25rem;
    font-size: 1.08rem;
    font-weight: 500;
  }

  .ax .abx-data-table-wrap .abx-data-table td:first-child::before,
  .ax .abx-data-table-wrap .abx-data-table td:not([data-label])::before {
    content: none;
  }
}

.ax .abx-title {
  font-family: var(--alt-serif);
  font-size: clamp(1.75rem, 7.6vw, 2.3rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.ax .abx-heading {
  font-family: var(--alt-serif);
  font-size: clamp(1.5rem, 6.4vw, 1.9rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.008em;
}

.ax .abx-lede {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
}

.ax .abx-portal-header,
.ax .abx-staff-header {
  margin-bottom: 0;
}

.abx-app.ax .abx-badge {
  height: 1.6rem;
  padding: 0 0.65rem;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.abx-app.ax .abx-badge.abx-badge--accent {
  border: 1px solid var(--abx-border-strong);
  background: transparent;
  color: var(--abx-text-muted);
}

.ax .abx-badge + .abx-title {
  margin-top: 0.6rem;
}

.abx-app.ax .abx-card {
  gap: 0.9rem;
  width: auto;
  max-width: none;
  /* Never auto margins: they make a grid item shrink-wrap its content, which
     lets a row of tabs push the card wider than the screen. */
  margin-inline: 0;
  padding: 1.15rem 1.1rem;
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--ax-card);
  box-shadow: none;
}

.ax .abx-card + .abx-card {
  margin-top: 0;
}

.ax .abx-stack {
  gap: clamp(1.25rem, 5vw, 1.75rem);
}

/* Buttons: the same pills as .cta. */
.abx-app.ax .abx-btn {
  height: auto;
  min-height: 3rem;
  padding: 0 1.4rem;
  border-radius: var(--abx-radius-pill);
  font-size: 0.92rem;
}

.abx-app.ax .abx-btn--sm {
  min-height: 2.5rem;
  padding: 0 1.1rem;
  font-size: 0.85rem;
}

.abx-app.ax .abx-btn--secondary {
  border: 1px solid var(--abx-border-strong);
  background: transparent;
}

.abx-app.ax .abx-btn--primary {
  color: var(--abx-on-accent);
}

@media (hover: hover) {
  .abx-app.ax .abx-btn--secondary:hover {
    background: var(--abx-surface-sunken);
  }
}

.ax .abx-actions {
  margin-top: 0.25rem;
}

/* Fields. */
.ax .abx-field {
  gap: 0;
}

.ax .abx-field__label {
  margin-bottom: 0.4rem;
  font-family: var(--abx-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.ax .abx-field .abx-field__label {
  margin-bottom: 0.4rem;
}

.abx-app.ax .abx-input,
.abx-app.ax .abx-textarea,
.abx-app.ax select.abx-input,
.abx-app.ax input.abx-input {
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: 0.9rem;
  background-color: var(--ax-card);
  font-size: 1.0625rem;
  line-height: 1.35;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--abx-dur-2) var(--abx-ease), box-shadow var(--abx-dur-2) var(--abx-ease);
}

.abx-app.ax select.abx-input,
.ax select:not([class]):not([multiple]) {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171716' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 9 6.5 6.5L18.5 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 1.05rem;
  text-overflow: ellipsis;
}

.abx-app.ax .abx-textarea {
  min-height: 6.5rem;
}

.abx-app.ax .abx-input:focus,
.abx-app.ax .abx-textarea:focus {
  border-color: var(--abx-ink-900);
  box-shadow: 0 0 0 3px rgba(23, 23, 22, 0.1);
}

.abx-app.ax .data-field .abx-input,
.abx-app.ax .abx-input-wrap .abx-input {
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ax .field-hint,
.ax .abx-field__hint {
  padding-left: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--abx-text-muted);
}

/* Toggles: the switch on the right, on = ink. */
.abx-app.ax {
  --abx-toggle-track-on: var(--abx-ink-900);
}

.abx-app.ax .toggle-label,
.abx-app.ax .abx-toggle-label {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  margin: 0;
  padding: 0;
  font-family: var(--abx-font-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: var(--abx-text);
}

.abx-app.ax .toggle-text,
.abx-app.ax .abx-toggle-text {
  flex: 1;
  font-family: var(--abx-font-sans);
  font-size: 1rem;
  font-weight: 500;
}

.ax .settings-toggle-field {
  margin: 0;
  border-top: 1px solid var(--abx-border);
}

.ax .settings-toggle-field:first-child {
  border-top: 0;
}

/* Segmented radios. */
.abx-app.ax .abx-segmented {
  padding: 0.25rem;
}

.abx-app.ax .abx-segmented__radio {
  min-height: 2.5rem;
  border-radius: var(--abx-radius-pill);
  font-size: 0.8rem;
  text-transform: none;
}

.abx-app.ax .abx-segmented__radio:has(input:checked) {
  background: var(--abx-ink-900);
  color: var(--abx-beige-100);
  box-shadow: none;
}

/* Figures. */
.ax .abx-stat-grid,
.ax .metric-grid {
  gap: 0.6rem;
}

.abx-app.ax .abx-stat-card {
  gap: 0.35rem;
  padding: 0.95rem 1rem 1rem;
  border-radius: 1.1rem;
  background: var(--ax-card);
  box-shadow: none;
}

.ax .abx-stat-card__label {
  font-family: var(--abx-font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--abx-text-muted);
}

.ax .abx-stat-card__value {
  font-family: var(--alt-serif);
  font-size: clamp(1.7rem, 7.6vw, 2.25rem);
  font-weight: 400;
  line-height: 1;
}

/* Tables. */
.ax .abx-data-table-wrap {
  border-radius: var(--abx-radius-lg);
  background: var(--ax-card);
}

.ax .abx-data-table th {
  background: transparent;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--abx-text-muted);
}

.ax .abx-data-table-wrap .abx-data-table td::before {
  font-family: var(--abx-font-display);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.ax .abx-tag {
  min-height: 1.6rem;
  padding: 0 0.65rem;
  border-color: var(--abx-border-strong);
  background: transparent;
  font-family: var(--abx-font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.ax .abx-tag--ok {
  border-color: rgba(31, 111, 58, 0.32);
  background: rgba(31, 111, 58, 0.1);
  color: #17502b;
}

.ax .abx-tag--critical {
  border-color: var(--abx-danger-border);
  background: var(--abx-danger-soft);
  color: var(--abx-danger);
}

.ax .abx-empty-state {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 2.25rem 1.25rem;
  border: 1px dashed var(--abx-border-strong);
  border-radius: var(--abx-radius-lg);
}

.ax .abx-empty-state .abx-empty-state__icon {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  color: var(--abx-text-muted);
  opacity: 1;
}

.ax .abx-empty-state__title {
  font-family: var(--alt-serif);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.04;
  color: var(--abx-text);
}

.ax .abx-detail-list__label {
  font-family: var(--abx-font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.ax .abx-detail-section {
  border-radius: var(--abx-radius-lg);
  background: var(--ax-card);
}

.abx-app.ax a.abx-link:not(.abx-btn),
.ax .abx-link {
  color: var(--abx-text);
  font-weight: 500;
  text-underline-offset: 3px;
}

.abx-app.ax .abx-alert-card {
  margin-bottom: 0;
  border-color: rgba(168, 85, 27, 0.34);
  background: rgba(168, 85, 27, 0.1);
}

.abx-app.ax .abx-alert-card--critical {
  border-color: var(--abx-danger-border);
  background: var(--abx-danger-soft);
}

/* One-line notices from the pages' own showToast(): ink, above the tab bar. */
.ax .abx-toast-host {
  top: auto;
  right: 0.75rem;
  bottom: calc(var(--ax-tabs-h) + var(--ax-safe-b) + 0.75rem);
  left: 0.75rem;
  z-index: 80;
  display: grid;
  gap: 0.5rem;
  width: auto;
  max-width: 26rem;
  margin-inline: auto;
  transform: none;
}

.ax .abx-toast-host .abx-toast {
  width: auto;
  max-width: none;
  padding: 0.85rem 0.75rem 0.85rem 1.1rem;
  border: 0;
  border-radius: 1.1rem;
  background: var(--abx-ink-900);
  color: var(--abx-beige-300);
  box-shadow: var(--abx-elev-toast);
  font-size: 0.95rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.25s var(--abx-ease), transform 0.45s var(--ax-ease);
}

.ax .abx-toast-host .abx-toast.is-active {
  opacity: 1;
  transform: none;
}

.ax .abx-toast__row {
  align-items: center;
}

.ax .abx-toast__row::before {
  content: '';
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #7fd09a;
}

.ax .abx-toast--error .abx-toast__row::before {
  background: #f08a7b;
}

.ax .abx-toast__message strong {
  font-family: var(--abx-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ax .abx-toast__close {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(214, 211, 205, 0.12);
}

.ax .abx-toast__close {
  display: grid;
  place-items: center;
  color: inherit;
}

/* "Are you sure?" dialogs: a sheet from the bottom edge on a phone. */
.abx-app.ax .confirm-modal-overlay {
  z-index: 75;
  align-items: flex-end;
  padding: 0;
  background: rgba(23, 23, 22, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.abx-app.ax .confirm-modal {
  display: grid;
  gap: 1.1rem;
  width: 100%;
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - 2.5rem);
  padding: 1.75rem var(--ax-gutter) calc(1.5rem + var(--ax-safe-b));
  border-radius: var(--ax-radius) var(--ax-radius) 0 0;
  background: var(--ax-sheet);
  color: var(--abx-ink-900);
  box-shadow: 0 -1.5rem 4rem rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  transform: translateY(2.5rem);
  transition: transform 0.5s var(--ax-ease);
}

.abx-app.ax .confirm-modal-overlay.show .confirm-modal {
  transform: none;
}

.abx-app.ax .confirm-modal-header,
.abx-app.ax .confirm-modal-body {
  margin: 0;
}

.abx-app.ax .confirm-modal-icon {
  display: none;
}

.abx-app.ax .confirm-modal-title {
  font-family: var(--alt-serif);
  font-size: clamp(1.8rem, 8vw, 2.2rem);
  font-weight: 400;
  line-height: 1.02;
}

.abx-app.ax .confirm-modal-body {
  display: grid;
  gap: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.abx-app.ax .confirm-modal-body ul {
  padding-left: 1.15rem !important;
  list-style: disc;
}

.abx-app.ax .confirm-modal-body input,
.abx-app.ax .confirm-modal-body textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: 0.9rem;
  background: var(--ax-card);
  font-size: 1.0625rem;
  outline: none;
}

.abx-app.ax .confirm-modal-footer {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.6rem;
}

.abx-app.ax .confirm-btn {
  min-height: 3.25rem;
  padding: 0 1rem;
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-display);
  font-size: 0.92rem;
  font-weight: 600;
}

.abx-app.ax .confirm-btn.cancel {
  border: 1px solid var(--abx-border-strong);
  background: transparent;
}

.abx-app.ax .confirm-btn.danger {
  background: var(--abx-danger);
}

@media (min-width: 40rem) {
  .abx-app.ax .confirm-modal-overlay {
    align-items: center;
    padding: 1.5rem;
  }

  .abx-app.ax .confirm-modal {
    width: min(30rem, 100%);
    padding-bottom: 1.75rem;
    border-radius: var(--ax-radius);
  }
}

/* "Danger zone". */
.abx-app.ax .abx-danger-zone {
  border-color: var(--abx-danger-border);
  background: var(--abx-danger-soft);
}

.abx-app.ax .abx-danger-zone .abx-heading--danger,
.abx-app.ax .danger-info h3 {
  color: var(--abx-danger);
}

.abx-app.ax .danger-info h3 {
  font-family: var(--abx-font-display);
  font-size: 1rem;
}

.abx-app.ax .danger-info p {
  font-size: 0.9rem;
  line-height: 1.45;
}

.abx-app.ax .danger-btn {
  min-height: 3rem;
  padding: 0 1.4rem;
  border-color: var(--abx-danger);
  border-radius: var(--abx-radius-pill);
  color: var(--abx-danger);
  font-family: var(--abx-font-display);
  font-size: 0.92rem;
  font-weight: 600;
}

.abx-app.ax .status-badge {
  font-family: var(--abx-font-display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

/* 7. WIDE SCREENS ========================================================== */

/* Tablets held upright: still one column, kept to a comfortable measure. */
@media (min-width: 46rem) and (max-width: 61.99rem) {
  .ax-hero__copy,
  .ax-anchor,
  .ax--normal .ax-sheet__inner > *,
  .ax--normal .ax-foot > * {
    width: 100%;
    max-width: 42rem;
    margin-inline: auto;
  }

  .ax-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* From here the stage and the sheet sit side by side. */
@media (min-width: 62rem) {
  .abx-app.alt.ax {
    --ax-col: clamp(22rem, 36vw, 35rem);
    --ax-gutter: clamp(2rem, 3.2vw, 3.25rem);
    --ax-fs-title: clamp(2.6rem, min(4.3vw, calc(var(--alt-vh) * 8.5)), 4.6rem);
    --ax-tabs-h: 0px;
  }

  /* Tool pages (lists, tables, the schedule) give the sheet more room. */
  .abx-app.alt.ax--wide {
    --ax-col: clamp(18.5rem, 25vw, 24rem);
    --ax-fs-title: clamp(2.3rem, min(3.1vw, calc(var(--alt-vh) * 7)), 3.3rem);
  }

  .abx-app.alt.ax--hero-none {
    --ax-col: 0px;
  }

  .ax-stage {
    width: var(--ax-col);
  }

  /* The bar straddles both: wordmark over the stage, menu over the sheet. */
  .ax .ax-bar .alt-bar__actions {
    --abx-text: var(--abx-ink-900);
    --abx-text-subtle: var(--abx-ink-400);
    --abx-accent: var(--abx-ink-900);
    --abx-accent-hover: #2c2b27;
    --abx-inverse: var(--abx-beige-300);
    --abx-on-accent: var(--abx-beige-100);
    color: var(--abx-ink-900);
  }

  html.alt-menu-open .ax .ax-bar .alt-bar__actions {
    --abx-text: var(--abx-beige-300);
    color: var(--abx-beige-300);
  }

  /* Only the sheet scrolls here; once it has, the menu's side of the bar
     takes the sheet's colour so nothing shows through behind it. */
  .ax-bar::before {
    left: var(--ax-col);
  }

  html.ax-scrolled .ax-bar::before {
    opacity: 1;
  }

  .ax-main.alt-main {
    display: block;
    min-height: 0;
  }

  .ax .ax-hero {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--ax-col);
    grid-template-rows: minmax(0, 1fr) auto;
    padding-bottom: clamp(2rem, calc(var(--alt-vh) * 6), 3.5rem);
  }

  /* With tabs beneath the headline, the copy sits above them. */
  .ax--tabbed .ax-hero {
    padding-bottom: calc(var(--ax-rail-h, 14rem) + clamp(3rem, calc(var(--alt-vh) * 8), 5rem));
  }

  .ax-hero::before {
    background:
      radial-gradient(60% 5% at 50% 26%, rgba(255, 237, 204, 0.36), rgba(255, 237, 204, 0) 72%),
      radial-gradient(150% 52% at 50% 26%, rgba(255, 237, 204, 0.17), rgba(255, 237, 204, 0) 64%);
  }

  .ax-anchor {
    margin: 0 0 clamp(1rem, calc(var(--alt-vh) * 3), 2.5rem);
  }

  .ax-hero .alt-lede {
    font-size: 1.05rem;
  }

  .ax-sheet {
    min-height: 100vh;
    margin: 0 0 0 var(--ax-col);
    border-radius: 0;
    box-shadow: none;
  }

  .ax-sheet__inner {
    padding-top: calc(var(--alt-bar-h) + 1.5rem);
    padding-bottom: 3.5rem;
  }

  /* Short pages (sign-in, a single form) sit in the middle of their side. */
  .ax--narrow .ax-sheet__inner {
    align-content: center;
    min-height: calc(100vh - 6rem);
  }

  .ax--normal .ax-sheet__inner > *,
  .ax--normal .ax-foot > * {
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
  }

  .ax-footer {
    margin-left: var(--ax-col);
  }

  /* The tabs: a short list at the foot of the stage. */
  .ax-tabs {
    inset: auto auto clamp(2rem, calc(var(--alt-vh) * 6), 3.5rem) var(--ax-gutter);
    z-index: 3;
    width: calc(var(--ax-col) - var(--ax-gutter) * 2);
    height: auto;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--abx-border-strong);
    background: transparent;
    box-shadow: none;
  }

  .ax-tabs ul {
    grid-auto-flow: row;
    gap: 0.1rem;
    height: auto;
    max-width: none;
    margin: 0;
  }

  .ax .ax-tab {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    min-height: 2.6rem;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
  }

  .ax-tab .ax-i {
    width: 1.25rem;
    height: 1.25rem;
  }

  .ax-tab::before {
    top: 50%;
    left: -1rem;
    width: 2px;
    height: 1.1rem;
    margin: -0.55rem 0 0;
    border-radius: 2px;
    transform: scaleY(0);
  }

  .ax-tab--primary .ax-i {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
  }

  .ax-tab--primary span {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
  }

  @media (hover: hover) {
    .ax .ax-tab:hover {
      color: var(--abx-text);
    }
  }

  /* Notices keep to the sheet's side, clear of the headline. */
  .ax .ax-cookie {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
  }

  .ax .abx-agent-panel__launcher {
    right: 1.5rem;
    bottom: 1.5rem;
  }

  .ax .abx-agent-panel__sheet {
    inset: 1.5rem 1.5rem 1.5rem auto;
    width: min(27rem, calc(100% - var(--ax-col) - 3rem));
    height: auto;
    border-radius: var(--ax-radius);
  }

  .ax #popup {
    left: calc(var(--ax-col) + (100% - var(--ax-col)) / 2);
    right: auto;
    width: min(26rem, calc(100% - var(--ax-col) - 2rem));
    margin: 0 0 0 calc(min(26rem, calc(100% - var(--ax-col) - 2rem)) / -2);
    bottom: 1.5rem;
  }

  /* Sheets slide in from the right edge instead of rising from the bottom. */
  .ax .slidePane {
    inset: 0 0 0 auto;
    width: min(34rem, calc(100% - var(--ax-col)));
    max-height: none;
    margin: 0;
    border-radius: 0;
    transform: translateX(102%);
  }

  .ax .slidePane-header {
    padding-top: 1.1rem;
  }

  .ax .slidePane-view {
    padding-top: 2.4rem;
  }

  .ax-stats {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }

  .ax-toolbar {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .ax-dockbar {
    margin-bottom: -3.5rem;
  }
}

/* A phone on its side: no room for a figure. */
@media (max-height: 30rem) and (max-width: 61.99rem) {
  .abx-app.alt.ax {
    --ax-figure-h: 0.5rem;
  }

  .ax-hero .alt-lede {
    display: none;
  }
}

/* 8. MOTION ================================================================ */

/* Arriving: the headline rises line by line, the sheet slides up beneath it.
   These fill backwards only: an animation that keeps filling after it ends
   still behaves like will-change, which would pin every position: fixed
   pop-up inside the sheet to the sheet instead of the screen. */
@keyframes ax-rise {
  from {
    opacity: 0;
    transform: translateY(1.1rem);
  }
}

@keyframes ax-sheet-in {
  from {
    transform: translateY(2.75rem);
  }
}

@keyframes ax-fade {
  from {
    opacity: 0;
  }
}

@keyframes ax-spin {
  to {
    transform: rotate(1turn);
  }
}

.js .ax-hero__copy > * {
  animation: ax-rise 0.9s var(--ax-ease) backwards;
}

.js .ax-hero__copy > :nth-child(2) { animation-delay: 0.07s; }
.js .ax-hero__copy > :nth-child(3) { animation-delay: 0.14s; }
.js .ax-hero__copy > :nth-child(4) { animation-delay: 0.21s; }
.js .ax-hero__copy > :nth-child(5) { animation-delay: 0.28s; }

.js .ax-sheet {
  animation: ax-sheet-in 0.85s var(--ax-ease) backwards;
}

.js .ax-sheet__inner > * {
  animation: ax-rise 0.8s var(--ax-ease) 0.12s backwards;
}

.js .ax-sheet__inner > :nth-child(2) { animation-delay: 0.18s; }
.js .ax-sheet__inner > :nth-child(3) { animation-delay: 0.24s; }
.js .ax-sheet__inner > :nth-child(4) { animation-delay: 0.3s; }
.js .ax-sheet__inner > :nth-child(n + 5) { animation-delay: 0.36s; }

.js .ax-tabs {
  animation: ax-fade 0.6s var(--abx-ease) 0.1s backwards;
}

@media (min-width: 62rem) {
  .js .ax-sheet {
    animation: none;
  }
}

/* Moving between pages: the frame stays, the sheet changes hands. Browsers
   without cross-document view transitions simply load the next page. The
   opt-in itself (@view-transition { navigation: auto }) is written inline in
   the page head by inc/app/shell.php: a browser asks for it the moment <body>
   starts, before this file is sure to have arrived. */
@media (prefers-reduced-motion: no-preference) {
  .ax-bar {
    view-transition-name: ax-bar;
  }

  .ax-tabs {
    view-transition-name: ax-tabs;
  }

  ::view-transition-group(ax-bar),
  ::view-transition-group(ax-tabs) {
    animation: none;
  }

  ::view-transition-old(root) {
    animation: 0.22s var(--abx-ease, ease) both ax-vt-out;
  }

  ::view-transition-new(root) {
    animation: 0.3s var(--abx-ease, ease) 0.05s both ax-fade;
  }
}

@keyframes ax-vt-out {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ax *,
  .ax *::before,
  .ax *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .ax .cta.is-busy::after,
  .ax .opacity-blur::after,
  .ax #payment-status.loading::before {
    animation-duration: 1.2s !important;
  }
}

/* Scrolling belongs to the document here, whatever script.js last wrote to
   <html> and <body> for the old layout; a class from script/app/panes.js
   holds the page still while something is open over it. */
html[data-ax-area] {
  overflow-y: auto !important;
}

html[data-ax-area].ax-pane-open {
  overflow: hidden !important;
}

html[data-ax-area] body {
  overflow: visible !important;
}

/* A choice among links: a pill, the current one filled. */
.ax .ax-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.6rem;
  padding: 0 1rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-display);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--abx-text);
  transition: background-color var(--abx-dur-2) var(--abx-ease), color var(--abx-dur-2) var(--abx-ease);
}

.ax .ax-pill[aria-current="page"],
.ax .ax-pill.is-active,
.ax .ax-pill[aria-pressed="true"] {
  border-color: var(--abx-ink-900);
  background: var(--abx-ink-900);
  color: var(--abx-beige-100);
}

/* Two ways to reach someone: "CALL · 07802 …". */
.ax-contact {
  display: grid;
  gap: 0.5rem;
}

.ax .ax-contact a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: 1rem;
  background: var(--ax-card);
}

.ax-contact a span:first-child {
  font-family: var(--abx-font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.ax-contact a span:last-child {
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}

/* The agent's chat (/ai/agent/, /staff/agent/): on a phone it is the whole
   screen under the bar, with its composer above the tab bar; on a wide screen
   the hero is the column beside it. Inside a panel's iframe (.ax--embedded)
   there is no frame at all. */
.ax--chat .ax-sheet {
  padding-bottom: 0;
}

.ax--chat .ax-sheet__inner {
  display: block;
  padding: 0;
}

.ax--chat .ax-sheet__inner > * {
  animation: none;
}

.ax .abx-chat-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: calc(100vh - var(--ax-tabs-h));
  height: calc(100dvh - var(--ax-tabs-h) - var(--ax-safe-b));
  min-height: 0;
  margin: 0;
  padding: calc(var(--alt-bar-h) + env(safe-area-inset-top, 0px)) 0 0;
  background: var(--ax-sheet);
  overflow: hidden;
}

.ax--embedded .abx-chat-page {
  height: 100vh;
  height: 100dvh;
  padding-top: 0;
}

.ax .abx-chat__title {
  font-family: var(--alt-serif);
  font-size: clamp(1.35rem, 6.2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.05;
  white-space: normal;
}

/* The conversation, in the app's hand: the agent speaks on paper cards, the
   person in ink; one pill to write in. (The parts are the design system's
   .abx-chat*, built by script/ai/chatUi.js.) */
.ax .abx-chat__header {
  padding: 0.9rem 0.85rem 0.85rem var(--ax-gutter);
  border-bottom: 1px solid var(--abx-border);
  background: var(--ax-sheet);
}

.ax .abx-chat__header-actions {
  gap: 0.4rem;
}

.ax .abx-chat__icon-btn {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--abx-border-strong);
  background: transparent;
  color: var(--abx-text);
}

.ax .abx-chat__icon-btn .ax-i {
  width: 1.15rem;
  height: 1.15rem;
}

.ax .abx-chat__log {
  gap: 1.1rem;
  padding: 1.5rem var(--ax-gutter);
}

.ax .abx-chat__empty,
.ax .abx-chat__gate {
  gap: 0.9rem;
  padding: 2rem 0;
}

.ax .abx-chat__empty-icon {
  width: 3.75rem;
  height: 3.75rem;
  background: var(--abx-ink-900);
  color: var(--abx-beige-300);
}

.ax .abx-chat__empty-icon .ax-i {
  width: 1.6rem;
  height: 1.6rem;
}

.ax .abx-chat__empty-title {
  font-family: var(--alt-serif);
  font-size: clamp(1.9rem, 8.6vw, 2.4rem);
  font-weight: 400;
  line-height: 1.02;
}

.ax .abx-chat__empty-text {
  max-width: 31ch;
  line-height: 1.5;
}

.ax .abx-chat__gate a {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ax .abx-chat__suggestions {
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.ax .abx-chat__suggestion {
  min-height: 2.75rem;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--abx-border-strong);
  background: var(--ax-card);
  font-family: var(--abx-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--abx-text);
}

.ax .abx-chat__avatar {
  width: 2rem;
  height: 2rem;
  background: var(--abx-ink-900);
  color: var(--abx-beige-300);
}

.ax .abx-chat__avatar .ax-i {
  width: 0.95rem;
  height: 0.95rem;
}

.ax .abx-chat__row--user .abx-chat__avatar {
  display: none;
}

.ax .abx-chat-bubble__text {
  padding: 0.8rem 1rem;
  border-radius: 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
}

.ax .abx-chat__row--user .abx-chat-bubble__text {
  border-bottom-right-radius: 0.45rem;
  background: var(--abx-ink-900);
  color: var(--abx-beige-100);
}

.ax .abx-chat__row--assistant .abx-chat-bubble__text,
.ax .abx-chat__typing {
  border: 1px solid var(--abx-border);
  border-radius: 1.25rem;
  border-bottom-left-radius: 0.45rem;
  background: var(--ax-card);
  color: var(--abx-text);
}

.abx-app.ax a.abx-chat-bubble__link-btn {
  background: var(--abx-ink-900);
  font-family: var(--abx-font-display);
  color: var(--abx-beige-100);
}

.ax .abx-chat-bubble__copy .ax-i,
.ax .abx-chat-bubble__feedback-btn .ax-i {
  width: 1rem;
  height: 1rem;
}

.ax .abx-chat-bubble__copy {
  width: 1.75rem;
  height: 1.75rem;
}

.ax .abx-chat-bubble__feedback-btn {
  width: 2.5rem;
  height: 2.5rem;
}

.ax .abx-chat__error {
  padding: 0 var(--ax-gutter);
}

.ax .abx-chat__error .abx-toast {
  position: static;
  z-index: auto;
  display: flex;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 0.9rem;
  background: var(--abx-danger-soft);
  color: var(--abx-danger);
  box-shadow: none;
}

.ax .abx-chat__error .abx-toast__row::before {
  content: none;
}

.ax .abx-chat__composer {
  padding: 0.7rem var(--ax-gutter) 0.8rem;
  border-top: 1px solid var(--abx-border);
  background: var(--ax-sheet);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* (With no tab bar under it — a guest, or the panel on another page — the
   composer keeps clear of the home indicator itself.) */
.ax:not(.ax--tabbed) .abx-chat__composer {
  padding-bottom: calc(0.8rem + var(--ax-safe-b));
}

.ax .abx-chat__composer-row {
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.3rem 0.3rem 0.45rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: 1.75rem;
  background: var(--ax-card);
  box-shadow: none;
}

.ax .abx-chat__composer-row:focus-within {
  border-color: var(--abx-ink-900);
  box-shadow: 0 0 0 3px rgba(23, 23, 22, 0.1);
}

.ax .abx-chat__textarea {
  padding: 0.55rem 0.5rem;
  font-size: 1.0625rem;
}

.ax .abx-chat__attach {
  width: 2.5rem;
  height: 2.5rem;
}

.ax .abx-chat__attach .ax-i {
  width: 1.2rem;
  height: 1.2rem;
}

.ax .abx-chat__send {
  width: 2.75rem;
  height: 2.75rem;
  background: var(--abx-ink-900);
  color: var(--abx-beige-100);
}

.ax .abx-chat__send .ax-i {
  width: 1.15rem;
  height: 1.15rem;
}

/* Past conversations: a sheet over the chat. */
.ax .abx-chat__history-panel {
  gap: 1rem;
  padding: 1.25rem var(--ax-gutter) calc(1.25rem + var(--ax-safe-b));
  border-radius: var(--ax-radius) var(--ax-radius) 0 0;
  background: var(--ax-sheet);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ax .abx-chat__history-title {
  font-family: var(--alt-serif);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.05;
}

.ax .abx-chat__history-item {
  border: 1px solid var(--abx-border);
  border-radius: 1rem;
  background: var(--ax-card);
}

.ax .abx-chat__history-item.is-active {
  border-color: var(--abx-ink-900);
  background: var(--abx-surface-sunken);
}

@media (max-width: 61.99rem) {
  .ax--chat .ax-hero {
    display: none;
  }

  .ax--chat .ax-sheet {
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }
}

@media (min-width: 62rem) {
  .ax .abx-chat-page {
    height: 100vh;
    max-width: 52rem;
    margin-inline: auto;
  }

  .ax--chat:not(.ax--embedded) .abx-chat__header-titles {
    visibility: hidden;
  }
}