@charset "utf-8";
/* ============================================================================
   ARXEON DESIGN SYSTEM — "PRISM"
   03 · COMPONENTS
   Requires: arxeon.tokens.css, arxeon.base.css
   ----------------------------------------------------------------------------
   CONTENTS
     01 Logo lockup          09 Select (custom listbox)
     02 Buttons              10 Tooltip / Popover
     03 Badge · Chip · Kbd   11 Modal · Drawer
     04 Avatar               12 Toast · Alert · Empty state
     05 Card                 13 Tabs · Accordion · Breadcrumb · Pagination
     06 Field shell          14 Stepper · Timeline
     07 Text controls        15 Loaders · Skeleton · Progress
     08 Choice controls      16 Table · Stat · Code
                             17 Header · Footer · Marketing blocks
   ========================================================================= */


/* ═══ 01 · LOGO LOCKUP ═══════════════════════════════════════════════════ */

.ax-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-5);
  text-decoration: none;
  color: var(--ax-text-strong);
  line-height: 1;
}
/* THREE FILES, ONE MARK. All three carry the same eleven <path> elements
   byte-for-byte from the purchased artwork, on the same viewBox, filled by
   the same nine-stop gradient.
     Arxeon-mark.svg         still. Footers, favicons, anywhere repeated.
     Arxeon-mark-logo.svg    one sweep of light, then 7.8s still. Site.Master.
     Arxeon-mark-loader.svg  continuous. Only where something is in flight.
   Use the logo file ONCE per page — in the header. A mark that pulses in
   three places at once stops being a signature and becomes wallpaper. */
.ax-logo__mark {
  inline-size: auto;
  block-size: 28px;
  aspect-ratio: 1377.4 / 1220.9;   /* measured from the artwork */
  flex: none;
  transition: filter var(--ax-d-slow) var(--ax-ease-out),
              transform var(--ax-d-slow) var(--ax-ease-out);
}
.ax-logo:hover .ax-logo__mark {
  filter: drop-shadow(0 0 14px rgb(var(--ax-cyan-rgb) / .40));
  transform: translateY(-1px);
}
.ax-logo__word {
  font-size: var(--ax-fs-lg);
  font-weight: var(--ax-fw-heavy);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ax-text-strong);
}
.ax-logo__word small {
  display: block;
  margin-block-start: 3px;
  font-family: var(--ax-font-mono);
  font-size: 9px;
  font-weight: var(--ax-fw-medium);
  letter-spacing: .22em;
  color: var(--ax-text-subtle);
}
.ax-logo--lg .ax-logo__mark { block-size: 52px; }
.ax-logo--lg .ax-logo__word { font-size: var(--ax-fs-2xl); }
.ax-logo--sm .ax-logo__mark { block-size: 22px; }
.ax-logo--sm .ax-logo__word { font-size: var(--ax-fs-md); }


/* ═══ 02 · BUTTONS ═══════════════════════════════════════════════════════
   THE APERTURE
   -------------------------------------------------------------------------
   Two earlier versions of this component were rejected, and both failures are
   worth keeping written down.

   v1 was a filled slab of spectrum. That contradicts the first law: if the
   housing is dark and only light passes through it, a primary button cannot
   be a rectangle of paint.

   v2 replaced the fill with a dark shell inside a full 1px lit border. It
   still read as a Windows button — because it still WAS one. A closed
   outlined rectangle is a closed outlined rectangle, and no quantity of glow,
   shadow or gradient on top of it changes what the silhouette says. The
   lesson: decoration cannot fix a form.

   v3 removes the form. A real object in a dark room does not have a uniform
   outline — light catches ONE arc of it and the rest falls away into the
   dark. So the edge here exists only where the light lands: a bright arc at
   the leading edge, nothing through the middle, a violet arc where the light
   leaves. There is no box, because there is no closed outline to read as one.

   The shape is a full capsule, which is also what separates ACTING from
   ENTERING in this system — controls you type into are rectangles at
   --ax-r-sm, controls you press are capsules. Never mix them.

   The hover is the idea: --ax-arc grows from 34% to 50%, so the two arcs
   reach around and THE OUTLINE COMPLETES ITSELF as you approach. The light
   in the base rises with it. Nothing else moves.
   ===================================================================== */

.ax-btn {
  --btn-h: var(--ax-control-h);
  --btn-px: var(--ax-sp-9);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ax-sp-4);
  block-size: var(--btn-h);
  padding-inline: var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--ax-r-full);
  font-size: var(--ax-fs-sm);
  font-weight: var(--ax-fw-semibold);
  letter-spacing: -.005em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--ax-d-fast) var(--ax-ease-out),
              box-shadow var(--ax-d-base) var(--ax-ease-out),
              background-color var(--ax-d-fast) var(--ax-ease),
              color var(--ax-d-fast) var(--ax-ease),
              opacity var(--ax-d-fast) var(--ax-ease);
}

/* The 30deg beam, unchanged — it is the one thing that crosses the form. */
.ax-btn::after {
  content: "";
  position: absolute;
  inset-block: -60%;
  inset-inline-start: -140%;
  inline-size: 46%;
  transform: skewX(var(--ax-axis));
  background: linear-gradient(90deg, transparent,
              rgb(var(--ax-white-rgb) / .14), transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.ax-btn:hover::after { animation: ax-beam var(--ax-d-slower) var(--ax-ease-out); }
@keyframes ax-beam {
  0%   { inset-inline-start: -140%; opacity: 0; }
  22%  { opacity: 1; }
  100% { inset-inline-start: 150%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ax-btn:hover::after { animation: none; } }

.ax-btn:active { transform: translateY(1px) scale(.994); }
.ax-btn:focus-visible { box-shadow: var(--ax-ring); }
.ax-btn[disabled], .ax-btn[aria-disabled="true"], .ax-btn.is-disabled {
  pointer-events: none;
  opacity: .40;
  filter: saturate(.3);
}
.ax-btn__icon { flex: none; inline-size: 16px; block-size: 16px; }
.ax-btn__icon svg { inline-size: 100%; block-size: 100%; display: block; }


/* ── the aperture construction ──────────────────────────────────────────
   --lum-near  the light at the leading edge
   --lum-far   the light as it leaves
   --ax-arc    how far around the capsule each arc reaches, as a percentage
               of the gradient line. 34% at rest leaves a third of the
               perimeter unlit; 50% closes the ring. Registered in the tokens
               file so it interpolates — this is the hover.
   --ax-bloom  how much light is pooled in the base of the capsule.
   ------------------------------------------------------------------- */

.ax-btn--primary,
.ax-btn--spectral,
.ax-btn--danger {
  color: var(--ax-text-strong);
  font-weight: var(--ax-fw-bold);
  background:
    /* light pooled in the base, inside the form */
    radial-gradient(132% 172% at 50% 142%,
        rgb(var(--lum-near) / var(--ax-bloom)),
        rgb(var(--lum-far) / calc(var(--ax-bloom) * .50)) 42%,
        rgb(var(--lum-far) / 0) 72%) padding-box,
    /* the body: dark glass, lighter at the top where a sky would fall on it */
    linear-gradient(180deg, #17171A, #0E0E10) padding-box,
    /* the two arcs. Alpha is explicit rather than the `transparent` keyword,
       which some engines interpolate through black and fringe the fade. */
    linear-gradient(var(--ax-axis-grad),
        rgb(var(--lum-near) / .95) 0%,
        rgb(var(--lum-near) / .58) calc(var(--ax-arc) * .58),
        rgb(var(--lum-near) / 0)   var(--ax-arc),
        rgb(var(--lum-far)  / 0)   calc(100% - var(--ax-arc)),
        rgb(var(--lum-far)  / .58) calc(100% - var(--ax-arc) * .58),
        rgb(var(--lum-far)  / .95) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgb(var(--ax-white-rgb) / .10),
    0 10px 30px -16px rgb(var(--lum-near) / .55);
  transition: transform var(--ax-d-fast) var(--ax-ease-out),
              box-shadow var(--ax-d-slow) var(--ax-ease-out),
              --ax-bloom var(--ax-d-slow) var(--ax-ease-out),
              --ax-arc var(--ax-d-slow) var(--ax-ease-out),
              color var(--ax-d-fast) var(--ax-ease);
}

/* --lum-near is the TOP-RIGHT arc, --lum-far the BOTTOM-LEFT one, because
   --ax-axis-grad runs 210deg. The logo puts cyan at the top of every blade
   and violet at the base, so the lighter light always goes to --lum-near.
   An earlier pass had --spectral mirrored, which read as the same button
   flipped rather than a different light. */
.ax-btn--primary  { --lum-near: var(--ax-cyan-rgb);           --lum-far: var(--ax-violet-rgb); }
.ax-btn--spectral { --lum-near: var(--ax-violet-bright-rgb);  --lum-far: var(--ax-violet-rgb); }
.ax-btn--danger   { --lum-near: var(--ax-danger-rgb);         --lum-far: var(--ax-danger-rgb); }

/* The hover: the arcs reach around and the ring closes. */
.ax-btn--primary:hover,
.ax-btn--spectral:hover,
.ax-btn--danger:hover {
  --ax-arc: 50%;
  --ax-bloom: .60;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgb(var(--ax-white-rgb) / .16),
    0 18px 46px -20px rgb(var(--lum-near) / .85);
}
.ax-btn--primary:active,
.ax-btn--spectral:active,
.ax-btn--danger:active { --ax-arc: 30%; --ax-bloom: .34; transform: translateY(0) scale(.994); }

.ax-btn--danger:focus-visible { box-shadow: var(--ax-ring-danger); }

/* — solid: the one filled variant, for a busy table row or a lit CTA band,
     where an aperture would be lost. Its fill stops at --ax-spec-floor so
     the ink on it clears 4.5:1 at every stop. — */
.ax-btn--solid {
  background-image: linear-gradient(var(--ax-axis-grad),
      var(--ax-spec-0) 0%, var(--ax-spec-2) 28%,
      var(--ax-spec-4) 68%, var(--ax-spec-floor) 100%);
  color: var(--ax-text-on-spec);
  font-weight: var(--ax-fw-bold);
  box-shadow: inset 0 1px 0 rgb(var(--ax-white-rgb) / .30),
              0 8px 26px -12px rgb(var(--ax-cyan-rgb) / .55);
}
.ax-btn--solid:hover { transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgb(var(--ax-white-rgb)/.36),
              0 14px 36px -12px rgb(var(--ax-cyan-rgb)/.70); }

/* — secondary: no outline at all. A capsule of slightly lifted dark, which is
     all a secondary action ever needed to be. — */
.ax-btn--secondary {
  color: var(--ax-text);
  border-color: transparent;
  background: rgb(var(--ax-white-rgb) / .055) padding-box;
  box-shadow: inset 0 1px 0 rgb(var(--ax-white-rgb) / .055);
}
.ax-btn--secondary:hover {
  color: var(--ax-text-strong);
  background: rgb(var(--ax-white-rgb) / .10) padding-box;
  transform: translateY(-1px);
}

/* — ghost — */
.ax-btn--ghost { color: var(--ax-text-muted); background: transparent; }
.ax-btn--ghost:hover {
  color: var(--ax-text-strong);
  background: rgb(var(--ax-white-rgb) / .06);
}

/* — outline: the same two arcs with no body behind them, for a quiet action
     that still belongs to the lit family. — */
.ax-btn--outline {
  --lum-near: var(--ax-cyan-rgb);
  --lum-far: var(--ax-violet-rgb);
  color: var(--ax-text);
  /* The padding-box layer MUST be opaque. A translucent one lets the
     border-box gradient show through the whole element and the button turns
     into a blob of spectrum — the same trap that caught the choice cards. */
  background:
    linear-gradient(180deg, #131315, #0C0C0E) padding-box,
    linear-gradient(var(--ax-axis-grad),
        rgb(var(--lum-near) / .70) 0%,
        rgb(var(--lum-near) / 0)   var(--ax-arc),
        rgb(var(--lum-far)  / 0)   calc(100% - var(--ax-arc)),
        rgb(var(--lum-far)  / .70) 100%) border-box;
  transition: transform var(--ax-d-fast) var(--ax-ease-out),
              --ax-arc var(--ax-d-slow) var(--ax-ease-out),
              color var(--ax-d-fast) var(--ax-ease);
}
.ax-btn--outline:hover { --ax-arc: 50%; color: var(--ax-text-strong); transform: translateY(-1px); }

/* — sizes — */
.ax-btn--sm { --btn-h: var(--ax-control-h-sm); --btn-px: var(--ax-sp-7); font-size: var(--ax-fs-xs); }
.ax-btn--lg { --btn-h: var(--ax-control-h-lg); --btn-px: var(--ax-sp-11); font-size: var(--ax-fs-md); }
.ax-btn--block { inline-size: 100%; }
.ax-btn--icon { --btn-px: 0; inline-size: var(--btn-h); }
/* For dense UI — a table row, a toolbar — where capsules would crowd. */
.ax-btn--sharp { border-radius: var(--ax-r-sm); }

/* — loading — */
.ax-btn.is-loading { pointer-events: none; color: transparent !important; }
.ax-btn.is-loading::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 17px; block-size: 17px;
  margin: -8.5px 0 0 -8.5px;
  border-radius: 50%;
  border: 2px solid rgb(var(--ax-white-rgb) / .18);
  border-block-start-color: var(--ax-text-strong);
  animation: ax-spin .62s linear infinite;
  z-index: 3;
}
.ax-btn--solid.is-loading::before {
  border-color: rgb(var(--ax-black-rgb)/.22);
  border-block-start-color: var(--ax-text-on-spec);
}
@keyframes ax-spin { to { transform: rotate(360deg); } }

/* — group: capsule ends, square joints — */
.ax-btn-group { display: inline-flex; }
.ax-btn-group .ax-btn { border-radius: 0; }
.ax-btn-group .ax-btn:first-child { border-start-start-radius: var(--ax-r-full); border-end-start-radius: var(--ax-r-full); padding-inline-start: var(--ax-sp-8); }
.ax-btn-group .ax-btn:last-child  { border-start-end-radius: var(--ax-r-full);  border-end-end-radius: var(--ax-r-full);  padding-inline-end: var(--ax-sp-8); }
.ax-btn-group .ax-btn:only-child  { border-radius: var(--ax-r-full); }
.ax-btn-group .ax-btn + .ax-btn { margin-inline-start: 1px; }


/* ═══ 03 · BADGE · CHIP · KBD ════════════════════════════════════════════ */

.ax-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-3);
  block-size: 22px;
  padding-inline: var(--ax-sp-4);
  border-radius: var(--ax-r-xs);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  font-weight: var(--ax-fw-medium);
  letter-spacing: .045em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  background: rgb(var(--ax-white-rgb) / .06);
  color: var(--ax-text-muted);
  border: 1px solid rgb(var(--ax-white-rgb) / .07);
}
.ax-badge--spec    { background: rgb(var(--ax-cyan-rgb)/.11);    color: var(--ax-cyan-bright);  border-color: rgb(var(--ax-cyan-rgb)/.26); }
.ax-badge--violet  { background: rgb(var(--ax-violet-rgb)/.13);  color: var(--ax-violet-bright);border-color: rgb(var(--ax-violet-rgb)/.28); }
.ax-badge--success { background: rgb(var(--ax-success-rgb)/.11); color: var(--ax-success);      border-color: rgb(var(--ax-success-rgb)/.26); }
.ax-badge--warning { background: rgb(var(--ax-warning-rgb)/.11); color: var(--ax-warning);      border-color: rgb(var(--ax-warning-rgb)/.26); }
.ax-badge--danger  { background: rgb(var(--ax-danger-rgb)/.11);  color: var(--ax-danger);       border-color: rgb(var(--ax-danger-rgb)/.26); }
/* Even at 22px, a flat spectrum chip reads as a sticker. Same move as the
   buttons: dark body, lit rim, the colour in the light rather than the fill. */
.ax-badge--solid {
  color: var(--ax-cyan-bright);
  font-weight: var(--ax-fw-bold);
  border-color: transparent;
  background:
    linear-gradient(var(--ax-ink-150), var(--ax-ink-100)) padding-box,
    linear-gradient(var(--ax-axis-grad),
      rgb(var(--ax-cyan-rgb)/.85), rgb(var(--ax-indigo-rgb)/.40) 48%,
      rgb(var(--ax-violet-rgb)/.75)) border-box;
  box-shadow: 0 4px 16px -8px rgb(var(--ax-cyan-rgb)/.55);
}

.ax-dot {
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.ax-dot--live { position: relative; }
.ax-dot--live::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  animation: ax-ping 1.9s var(--ax-ease-out) infinite;
}
@keyframes ax-ping {
  0%   { transform: scale(.7); opacity: .9; }
  80%, 100% { transform: scale(2.1); opacity: 0; }
}

.ax-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-4);
  block-size: 32px;
  padding-inline: var(--ax-sp-5);
  border-radius: var(--ax-r-full);
  font-size: var(--ax-fs-xs);
  font-weight: var(--ax-fw-medium);
  color: var(--ax-text-body);
  background:
    linear-gradient(var(--ax-ink-150), var(--ax-ink-150)) padding-box,
    var(--ax-edge-quiet) border-box;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--ax-t-color), transform var(--ax-d-fast) var(--ax-ease-out);
}
.ax-chip:hover { color: var(--ax-text-strong); transform: translateY(-1px); }
.ax-chip[aria-pressed="true"], .ax-chip.is-active {
  color: var(--ax-cyan-bright);
  background:
    linear-gradient(rgb(var(--ax-cyan-rgb)/.13), rgb(var(--ax-cyan-rgb)/.13)) padding-box,
    linear-gradient(var(--ax-ink-150), var(--ax-ink-150)) padding-box,
    var(--ax-edge-hi) border-box;
}
.ax-chip__x {
  position: relative;
  inline-size: 15px; block-size: 15px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(var(--ax-white-rgb)/.1);
  font-size: 10px; line-height: 1;
  transition: background var(--ax-d-fast) var(--ax-ease);
}
/* Visually 15px, but the pointer/finger target is 24px — WCAG 2.5.8. */
.ax-chip__x::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.ax-chip__x:hover { background: rgb(var(--ax-danger-rgb)/.5); }

kbd, .ax-kbd {
  display: inline-block;
  min-inline-size: 22px;
  padding: 3px 6px;
  border-radius: var(--ax-r-xs);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  line-height: 1.2;
  text-align: center;
  color: var(--ax-text-muted);
  background: var(--ax-ink-200);
  border: 1px solid var(--ax-ink-300);
  box-shadow: 0 2px 0 var(--ax-ink-300), inset 0 1px 0 rgb(var(--ax-white-rgb)/.05);
}


/* ═══ 04 · AVATAR ════════════════════════════════════════════════════════ */

.ax-avatar {
  position: relative;
  inline-size: 40px; block-size: 40px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  overflow: hidden;
  font-size: var(--ax-fs-sm);
  font-weight: var(--ax-fw-bold);
  letter-spacing: .02em;
  color: var(--ax-text-on-spec);
  background: var(--ax-grad-carry);
  box-shadow: 0 0 0 1px rgb(var(--ax-white-rgb)/.08);
}
.ax-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ax-avatar--sm { inline-size: 28px; block-size: 28px; font-size: var(--ax-fs-3xs); }
.ax-avatar--lg { inline-size: 56px; block-size: 56px; font-size: var(--ax-fs-lg); }
.ax-avatar-stack { display: flex; }
.ax-avatar-stack .ax-avatar + .ax-avatar { margin-inline-start: -12px; }
.ax-avatar-stack .ax-avatar { box-shadow: 0 0 0 2px var(--ax-bg); }


/* ═══ 05 · CARD ══════════════════════════════════════════════════════════ */

.ax-card {
  position: relative;
  border-radius: var(--ax-r-lg);
  padding: var(--ax-sp-8);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ax-surface), var(--ax-surface)) padding-box,
    var(--ax-edge) border-box;
  box-shadow: var(--ax-el-1);
  transition: var(--ax-t-lift), background var(--ax-d-base) var(--ax-ease);
}
.ax-card::before {                    /* spectral hairline on the top lip */
  content: "";
  position: absolute;
  inset-inline: 14%;
  inset-block-start: 0;
  block-size: 1px;
  background: var(--ax-grad-hair);
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--ax-d-base) var(--ax-ease);
}
.ax-card--lg  { padding: var(--ax-sp-11); border-radius: var(--ax-r-xl); }
.ax-card--sm  { padding: var(--ax-sp-6); border-radius: var(--ax-r-md); }
.ax-card--flat{ box-shadow: none; background: linear-gradient(var(--ax-ink-100), var(--ax-ink-100)) padding-box, var(--ax-edge-quiet) border-box; }

/* Interactive card: lifts, brightens its edge, and tracks the cursor with a
   spotlight (the --mx/--my pair is written by arxeon.core.js). */
.ax-card--interactive { cursor: pointer; }
.ax-card--interactive::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--ax-mx, 50%) var(--ax-my, 0%),
              rgb(var(--ax-cyan-rgb) / .09), transparent 62%);
  transition: opacity var(--ax-d-slow) var(--ax-ease-out);
}
.ax-card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--ax-el-3);
  background:
    linear-gradient(var(--ax-surface-2), var(--ax-surface-2)) padding-box,
    var(--ax-edge-hi) border-box;
}
.ax-card--interactive:hover::after  { opacity: 1; }
.ax-card--interactive:hover::before { opacity: 1; }
.ax-card--interactive:focus-within  { box-shadow: var(--ax-ring); }

.ax-card__eyebrow { margin-block-end: var(--ax-sp-5); }
.ax-card__title { font-size: var(--ax-fs-lg); font-weight: var(--ax-fw-bold); letter-spacing: var(--ax-tr-lead); color: var(--ax-text-strong); }
.ax-card__body  { margin-block-start: var(--ax-sp-4); color: var(--ax-text-muted); font-size: var(--ax-fs-sm); line-height: 1.62; }
.ax-card__foot  { margin-block-start: var(--ax-sp-7); padding-block-start: var(--ax-sp-6); border-block-start: 1px solid var(--ax-line); }

/* Glass panel — for anything that floats over content. */
.ax-glass {
  background: rgb(25 25 27 / .72);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgb(var(--ax-white-rgb) / .085);
}
@supports not (backdrop-filter: blur(1px)) { .ax-glass { background: var(--ax-ink-150); } }


/* ═══ 06 · FIELD SHELL ═══════════════════════════════════════════════════ */

.ax-field { display: flex; flex-direction: column; gap: var(--ax-sp-4); min-inline-size: 0; }
.ax-field--row { flex-direction: row; align-items: center; gap: var(--ax-sp-5); }

.ax-label {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-3);
  font-size: var(--ax-fs-xs);
  font-weight: var(--ax-fw-semibold);
  letter-spacing: var(--ax-tr-tiny);
  color: var(--ax-text-muted);
  transition: color var(--ax-d-fast) var(--ax-ease);
}
.ax-field:focus-within > .ax-label { color: var(--ax-cyan-bright); }
.ax-label__req { color: var(--ax-danger); font-size: var(--ax-fs-sm); line-height: 1; }
.ax-label__opt { margin-inline-start: auto; font-weight: var(--ax-fw-regular); color: var(--ax-text-subtle); }

.ax-help {
  display: flex;
  align-items: flex-start;
  gap: var(--ax-sp-3);
  font-size: var(--ax-fs-xs);
  line-height: 1.5;
  color: var(--ax-text-subtle);
}
.ax-error {
  display: flex;
  align-items: flex-start;
  gap: var(--ax-sp-3);
  font-size: var(--ax-fs-xs);
  line-height: 1.5;
  color: var(--ax-danger);
  animation: ax-slip var(--ax-d-base) var(--ax-ease-out);
}
@keyframes ax-slip { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }


/* ═══ 07 · TEXT CONTROLS ═════════════════════════════════════════════════
   The control is a surface with a refraction edge. On focus the edge is
   replaced by a spectral one and a beam fills the bottom rail from the
   centre out — the light "arrives" at the field.                        */

.ax-input, .ax-textarea, .ax-select__trigger, .ax-native-select {
  position: relative;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: var(--ax-control-h);
  padding-inline: var(--ax-sp-6);
  border: 1px solid transparent;
  border-radius: var(--ax-r-sm);
  background:
    linear-gradient(var(--ax-ink-100), var(--ax-ink-100)) padding-box,
    var(--ax-edge-quiet) border-box;
  color: var(--ax-text-strong);
  font-size: var(--ax-fs-sm);
  font-family: inherit;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--ax-d-base) var(--ax-ease),
              box-shadow var(--ax-d-base) var(--ax-ease-out),
              color var(--ax-d-fast) var(--ax-ease);
}
.ax-textarea {
  block-size: auto;
  min-block-size: 118px;
  padding-block: var(--ax-sp-5);
  line-height: var(--ax-lh-body);
  resize: vertical;
}
.ax-input::placeholder, .ax-textarea::placeholder { color: var(--ax-text-subtle); opacity: 1; }

.ax-input:hover, .ax-textarea:hover, .ax-select__trigger:hover, .ax-native-select:hover {
  background:
    linear-gradient(var(--ax-ink-150), var(--ax-ink-150)) padding-box,
    var(--ax-edge) border-box;
}
.ax-input:focus, .ax-textarea:focus, .ax-native-select:focus,
.ax-select__trigger:focus-visible, .ax-select.is-open .ax-select__trigger {
  outline: none;
  background:
    linear-gradient(var(--ax-ink-150), var(--ax-ink-150)) padding-box,
    var(--ax-edge-hi) border-box;
  box-shadow: 0 0 0 3px rgb(var(--ax-cyan-rgb) / .14),
              0 6px 26px -10px rgb(var(--ax-cyan-rgb) / .40);
}
.ax-input:disabled, .ax-textarea:disabled, .ax-native-select:disabled {
  color: var(--ax-text-disabled);
  cursor: not-allowed;
  background: linear-gradient(var(--ax-ink-050), var(--ax-ink-050)) padding-box,
              linear-gradient(var(--ax-ink-200), var(--ax-ink-200)) border-box;
}
.ax-input[readonly] { color: var(--ax-text-muted); }

.ax-input--lg, .ax-select--lg .ax-select__trigger { block-size: var(--ax-control-h-lg); font-size: var(--ax-fs-md); border-radius: var(--ax-r-md); padding-inline: var(--ax-sp-7); }
.ax-input--sm, .ax-select--sm .ax-select__trigger { block-size: var(--ax-control-h-sm); font-size: var(--ax-fs-xs); border-radius: var(--ax-r-xs); padding-inline: var(--ax-sp-5); }

/* invalid / valid */
.ax-input.is-invalid, .ax-textarea.is-invalid, .ax-input[aria-invalid="true"],
.ax-select.is-invalid .ax-select__trigger {
  background:
    linear-gradient(var(--ax-ink-100), var(--ax-ink-100)) padding-box,
    linear-gradient(var(--ax-axis-grad), rgb(var(--ax-danger-rgb)/.75), rgb(var(--ax-danger-rgb)/.35)) border-box;
  box-shadow: 0 0 0 3px rgb(var(--ax-danger-rgb) / .12);
}
.ax-input.is-valid, .ax-textarea.is-valid {
  background:
    linear-gradient(var(--ax-ink-100), var(--ax-ink-100)) padding-box,
    linear-gradient(var(--ax-axis-grad), rgb(var(--ax-success-rgb)/.65), rgb(var(--ax-success-rgb)/.28)) border-box;
}

/* — the bottom rail: a spectral beam that opens from the centre on focus — */
.ax-input-wrap { position: relative; display: block; min-inline-size: 0; }
.ax-input-wrap::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--ax-grad-sweep);
  transform: translateX(-50%);
  transition: inline-size var(--ax-d-slow) var(--ax-ease-out);
  pointer-events: none;
}
.ax-input-wrap:focus-within::after { inline-size: calc(100% - 18px); }

/* — addons (icon / prefix / suffix) — */
.ax-input-wrap--icon .ax-input { padding-inline-start: 42px; }
.ax-input-wrap--suffix .ax-input { padding-inline-end: 42px; }
.ax-input-affix {
  position: absolute;
  inset-block: 0;
  display: grid;
  place-items: center;
  inline-size: 42px;
  color: var(--ax-text-subtle);
  pointer-events: none;
  transition: color var(--ax-d-fast) var(--ax-ease);
  z-index: 2;
}
.ax-input-affix svg { inline-size: 16px; block-size: 16px; }
.ax-input-affix--start { inset-inline-start: 0; }
.ax-input-affix--end   { inset-inline-end: 0; pointer-events: auto; }
.ax-input-wrap:focus-within .ax-input-affix--start { color: var(--ax-cyan); }

/* — floating label — */
.ax-float { position: relative; display: block; min-inline-size: 0; }
.ax-float > .ax-input, .ax-float > .ax-textarea { padding-block-start: 21px; padding-block-end: 7px; }
.ax-float > .ax-input { block-size: 58px; }
.ax-float > .ax-textarea { min-block-size: 128px; }
.ax-float > label {
  position: absolute;
  inset-inline-start: var(--ax-sp-6);
  inset-block-start: 18px;
  font-size: var(--ax-fs-sm);
  color: var(--ax-text-subtle);
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform var(--ax-d-base) var(--ax-ease-out),
              color var(--ax-d-base) var(--ax-ease);
  z-index: 2;
}
.ax-float > .ax-input:focus + label,
.ax-float > .ax-input:not(:placeholder-shown) + label,
.ax-float > .ax-textarea:focus + label,
.ax-float > .ax-textarea:not(:placeholder-shown) + label {
  transform: translateY(-11px) scale(.78);
  color: var(--ax-cyan-bright);
}
.ax-float > .ax-input:not(:focus):not(:placeholder-shown) + label { color: var(--ax-text-subtle); }

/* — character counter — */
.ax-counter { font-family: var(--ax-font-mono); font-size: var(--ax-fs-3xs); color: var(--ax-text-subtle); margin-inline-start: auto; }
.ax-counter.is-over { color: var(--ax-danger); }

/* — password strength — */
.ax-strength { display: flex; gap: 4px; margin-block-start: var(--ax-sp-3); }
.ax-strength__seg {
  block-size: 3px; flex: 1;
  border-radius: 2px;
  background: var(--ax-ink-300);
  transition: background var(--ax-d-slow) var(--ax-ease-out);
}
.ax-strength[data-score="1"] .ax-strength__seg:nth-child(-n+1) { background: var(--ax-danger); }
.ax-strength[data-score="2"] .ax-strength__seg:nth-child(-n+2) { background: var(--ax-warning); }
.ax-strength[data-score="3"] .ax-strength__seg:nth-child(-n+3) { background: var(--ax-spec-4); }
.ax-strength[data-score="4"] .ax-strength__seg { background: var(--ax-success); }

/* — OTP — */
.ax-otp { display: flex; gap: var(--ax-sp-4); }
.ax-otp input {
  inline-size: 48px; block-size: 58px;
  text-align: center;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-xl);
  font-weight: var(--ax-fw-semibold);
  padding-inline: 0;
}
@media (max-width: 479px) { .ax-otp input { inline-size: 40px; block-size: 50px; font-size: var(--ax-fs-lg); } .ax-otp { gap: var(--ax-sp-3); } }

/* — file drop — */
.ax-drop {
  display: grid;
  place-items: center;
  gap: var(--ax-sp-4);
  padding: var(--ax-sp-11) var(--ax-sp-8);
  text-align: center;
  border-radius: var(--ax-r-md);
  border: 1px dashed var(--ax-ink-400);
  background: var(--ax-ink-100);
  color: var(--ax-text-muted);
  cursor: pointer;
  transition: var(--ax-t-color), border-color var(--ax-d-base) var(--ax-ease);
}
.ax-drop:hover, .ax-drop.is-over {
  border-color: var(--ax-cyan);
  background: rgb(var(--ax-cyan-rgb) / .06);
  color: var(--ax-text-strong);
}
.ax-drop.is-over { border-style: solid; box-shadow: 0 0 0 3px rgb(var(--ax-cyan-rgb)/.12); }
.ax-drop__icon { inline-size: 30px; block-size: 30px; color: var(--ax-cyan); }

/* — range — */
.ax-range {
  inline-size: 100%;
  block-size: 28px;   /* >= 24px target height; the track stays 4px */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.ax-range::-webkit-slider-runnable-track {
  block-size: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ax-spec-0) 0%, var(--ax-spec-6) var(--ax-range-pct, 50%), var(--ax-ink-300) var(--ax-range-pct, 50%));
}
.ax-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ax-ink-300); }
.ax-range::-moz-range-progress { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ax-spec-0), var(--ax-spec-6)); }
.ax-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  inline-size: 16px; block-size: 16px;
  margin-block-start: -6px;
  border-radius: 50%;
  background: var(--ax-ink-950);
  border: 0;
  box-shadow: 0 0 0 1px rgb(var(--ax-black-rgb)/.4), 0 2px 8px rgb(var(--ax-black-rgb)/.6);
  transition: transform var(--ax-d-fast) var(--ax-ease-spring), box-shadow var(--ax-d-fast) var(--ax-ease);
}
.ax-range::-moz-range-thumb {
  width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: var(--ax-ink-950);
  box-shadow: 0 0 0 1px rgb(0 0 0 /.4), 0 2px 8px rgb(0 0 0 /.6);
}
.ax-range:hover::-webkit-slider-thumb { transform: scale(1.18); }
.ax-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgb(var(--ax-cyan-rgb)/.35); }


/* ═══ 08 · CHOICE CONTROLS ═══════════════════════════════════════════════
   Checkbox and radio hide the native input (kept in the DOM, focusable and
   postback-safe) and draw the control themselves. The checkmark is a real
   stroked path animated with stroke-dashoffset, so it *draws* rather than
   fades — and it is on a spring, so it lands.                           */

.ax-check {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ax-sp-5);
  min-block-size: var(--ax-sp-8);
  cursor: pointer;
  font-size: var(--ax-fs-sm);
  line-height: 1.45;
  color: var(--ax-text-body);
  user-select: none;
  transition: color var(--ax-d-fast) var(--ax-ease);
}
.ax-check:hover { color: var(--ax-text-strong); }
.ax-check input {
  position: absolute;
  inline-size: 20px; block-size: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ax-check__box {
  position: relative;
  flex: none;
  inline-size: 20px; block-size: 20px;
  margin-block-start: 1px;
  border-radius: var(--ax-r-xs);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ax-ink-150), var(--ax-ink-150)) padding-box,
    var(--ax-edge-quiet) border-box;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: background var(--ax-d-base) var(--ax-ease),
              transform var(--ax-d-slow) var(--ax-ease-spring),
              box-shadow var(--ax-d-base) var(--ax-ease);
}
.ax-check:hover .ax-check__box {
  background: linear-gradient(var(--ax-ink-200), var(--ax-ink-200)) padding-box, var(--ax-edge) border-box;
}
.ax-check__box svg {
  inline-size: 13px; block-size: 13px;
  color: var(--ax-text-on-spec);
  position: relative; z-index: 2;
}
.ax-check__box svg path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset var(--ax-d-slow) var(--ax-ease-out) 40ms;
}
.ax-check input:checked ~ .ax-check__box {
  background: var(--ax-grad-carry) padding-box, var(--ax-grad-carry) border-box;
  transform: scale(1.06);
  box-shadow: 0 4px 16px -4px rgb(var(--ax-cyan-rgb)/.55);
}
.ax-check input:checked ~ .ax-check__box svg path { stroke-dashoffset: 0; }
.ax-check input:indeterminate ~ .ax-check__box {
  background: var(--ax-grad-carry) padding-box, var(--ax-grad-carry) border-box;
}
.ax-check input:indeterminate ~ .ax-check__box::after {
  content: ""; inline-size: 9px; block-size: 2px; border-radius: 1px;
  background: var(--ax-text-on-spec); position: absolute; z-index: 2;
}
.ax-check input:focus-visible ~ .ax-check__box { box-shadow: var(--ax-ring); }
.ax-check input:disabled ~ .ax-check__box { opacity: .4; }
.ax-check:has(input:disabled) { cursor: not-allowed; color: var(--ax-text-disabled); }
.ax-check__text small { display: block; color: var(--ax-text-subtle); font-size: var(--ax-fs-xs); margin-block-start: 2px; }

/* — radio — */
.ax-radio { }
.ax-radio .ax-check__box { border-radius: 50%; }
.ax-radio .ax-check__box::before {
  content: "";
  inline-size: 20px; block-size: 20px;
  border-radius: 50%;
  background: var(--ax-grad-carry);
  transform: scale(0);
  transition: transform var(--ax-d-slow) var(--ax-ease-spring);
  position: absolute;
}
.ax-radio .ax-check__box::after {
  content: "";
  inline-size: 7px; block-size: 7px;
  border-radius: 50%;
  background: var(--ax-text-on-spec);
  transform: scale(0);
  transition: transform var(--ax-d-slow) var(--ax-ease-spring) 60ms;
  position: relative; z-index: 2;
}
.ax-radio input:checked ~ .ax-check__box { transform: none; box-shadow: 0 4px 16px -4px rgb(var(--ax-cyan-rgb)/.5); }
.ax-radio input:checked ~ .ax-check__box::before { transform: scale(1); }
.ax-radio input:checked ~ .ax-check__box::after  { transform: scale(1); }

/* — card-style choice (radio or checkbox wrapped in a panel) — */
.ax-choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--ax-sp-5);
  padding: var(--ax-sp-6);
  border-radius: var(--ax-r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ax-ink-100), var(--ax-ink-100)) padding-box,
    var(--ax-edge-quiet) border-box;
  cursor: pointer;
  transition: background var(--ax-d-base) var(--ax-ease), transform var(--ax-d-fast) var(--ax-ease-out);
}
.ax-choice:hover { transform: translateY(-1px);
  background: linear-gradient(var(--ax-ink-150), var(--ax-ink-150)) padding-box, var(--ax-edge) border-box; }
.ax-choice:has(input:checked) {
  background:
    linear-gradient(rgb(var(--ax-cyan-rgb)/.10), rgb(var(--ax-cyan-rgb)/.10)) padding-box,
    linear-gradient(var(--ax-ink-150), var(--ax-ink-150)) padding-box,
    var(--ax-edge-hi) border-box;
  box-shadow: 0 8px 28px -14px rgb(var(--ax-cyan-rgb)/.6);
}
.ax-choice:has(input:focus-visible) { box-shadow: var(--ax-ring); }

/* — switch — */
.ax-switch { display: inline-flex; align-items: center; gap: var(--ax-sp-5); cursor: pointer; font-size: var(--ax-fs-sm); color: var(--ax-text-body); user-select: none; }
.ax-switch input { position: absolute; opacity: 0; inline-size: 46px; block-size: 26px; margin: 0; cursor: pointer; }
.ax-switch__track {
  position: relative;
  flex: none;
  inline-size: 46px; block-size: 26px;
  border-radius: var(--ax-r-full);
  background: var(--ax-ink-300);
  box-shadow: inset 0 1px 3px rgb(var(--ax-black-rgb)/.55);
  transition: background var(--ax-d-base) var(--ax-ease);
}
.ax-switch__track::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 20px; block-size: 20px;
  border-radius: 50%;
  background: var(--ax-ink-800);
  box-shadow: 0 2px 6px rgb(var(--ax-black-rgb)/.5);
  transition: transform var(--ax-d-slow) var(--ax-ease-spring),
              background var(--ax-d-base) var(--ax-ease),
              inline-size var(--ax-d-fast) var(--ax-ease);
}
.ax-switch input:checked ~ .ax-switch__track { background: var(--ax-grad-sweep); box-shadow: 0 0 18px -4px rgb(var(--ax-cyan-rgb)/.6); }
.ax-switch input:checked ~ .ax-switch__track::after { transform: translateX(20px); background: #fff; }
.ax-switch:active .ax-switch__track::after { inline-size: 25px; }
.ax-switch input:focus-visible ~ .ax-switch__track { box-shadow: var(--ax-ring); }
.ax-switch input:disabled ~ .ax-switch__track { opacity: .4; }

/* — segmented control — */
.ax-seg {
  position: relative;
  display: inline-flex;
  max-inline-size: 100%;
  padding: 4px;
  gap: 2px;
  border-radius: var(--ax-r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ax-ink-100), var(--ax-ink-100)) padding-box,
    var(--ax-edge-quiet) border-box;
}
.ax-seg__thumb {
  position: absolute;
  inset-block: 4px;
  border-radius: var(--ax-r-xs);
  background: var(--ax-ink-300);
  box-shadow: var(--ax-el-1), inset 0 1px 0 rgb(var(--ax-white-rgb)/.06);
  transition: transform var(--ax-d-slow) var(--ax-ease-out),
              inline-size var(--ax-d-slow) var(--ax-ease-out);
  pointer-events: none;
  z-index: 0;
}
.ax-seg__thumb::before {
  content: ""; position: absolute; inset-inline: 20%; inset-block-start: 0; block-size: 1px;
  background: var(--ax-grad-hair);
}
.ax-seg button {
  position: relative;
  z-index: 1;
  block-size: 32px;
  min-inline-size: 0;
  padding-inline: var(--ax-sp-6);
  border-radius: var(--ax-r-xs);
  font-size: var(--ax-fs-xs);
  font-weight: var(--ax-fw-semibold);
  color: var(--ax-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--ax-d-fast) var(--ax-ease);
}
@media (max-width: 479px) { .ax-seg button { padding-inline: var(--ax-sp-4); } }
.ax-seg button:hover { color: var(--ax-text-body); }
.ax-seg button[aria-selected="true"], .ax-seg button.is-active { color: var(--ax-text-strong); }


/* ═══ 09 · SELECT ════════════════════════════════════════════════════════
   A real <select> stays in the DOM (so asp:DropDownList posts back), and
   this listbox is layered over it. The panel opens on the 30deg axis:
   it rises, un-skews and un-blurs at once.                              */

.ax-select { position: relative; display: block; min-inline-size: 0; }
.ax-select__native {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.ax-select__trigger {
  display: flex;
  align-items: center;
  gap: var(--ax-sp-5);
  text-align: start;
  cursor: pointer;
}
.ax-select__value { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-select__value.is-placeholder { color: var(--ax-text-subtle); }
.ax-select__caret {
  flex: none;
  inline-size: 16px; block-size: 16px;
  color: var(--ax-text-subtle);
  transition: transform var(--ax-d-slow) var(--ax-ease-out), color var(--ax-d-fast) var(--ax-ease);
}
.ax-select.is-open .ax-select__caret { transform: rotate(180deg); color: var(--ax-cyan); }

.ax-select__panel {
  position: absolute;
  z-index: var(--ax-z-popover);
  inset-inline: 0;
  inset-block-start: calc(100% + 8px);
  padding: 6px;
  border-radius: var(--ax-r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ax-ink-150), var(--ax-ink-150)) padding-box,
    var(--ax-edge) border-box;
  box-shadow: var(--ax-el-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) skewX(-4deg) scale(.97);
  transform-origin: 50% 0;
  filter: blur(3px);
  transition: opacity var(--ax-d-base) var(--ax-ease-out),
              transform var(--ax-d-slow) var(--ax-ease-out),
              filter var(--ax-d-base) var(--ax-ease-out),
              visibility 0s linear var(--ax-d-slow);
}
.ax-select.is-open .ax-select__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition-delay: 0s;
}
.ax-select.is-up .ax-select__panel {
  inset-block-start: auto;
  inset-block-end: calc(100% + 8px);
  transform-origin: 50% 100%;
  transform: translateY(8px) skewX(-4deg) scale(.97);
}
.ax-select.is-up.is-open .ax-select__panel { transform: none; }

.ax-select__search {
  inline-size: 100%;
  block-size: 36px;
  margin-block-end: 6px;
  padding-inline: var(--ax-sp-5);
  border: 0;
  border-block-end: 1px solid var(--ax-line);
  border-radius: var(--ax-r-xs) var(--ax-r-xs) 0 0;
  background: transparent;
  color: var(--ax-text-strong);
  font-size: var(--ax-fs-sm);
}
/* The panel is already the focused surface, so the search box gets a quiet
   underline rather than the full prism ring — two rings inside each other
   read as an error state. */
.ax-select__search:focus,
.ax-select__search:focus-visible {
  outline: none;
  box-shadow: 0 1px 0 0 var(--ax-cyan);
  border-block-end-color: var(--ax-cyan);
}

/* An option with an empty value is the placeholder: muted, and never wearing
   the selected checkmark. */
.ax-select__opt.is-blank { color: var(--ax-text-subtle); }
.ax-select__opt.is-blank[aria-selected="true"] { color: var(--ax-text-subtle); font-weight: var(--ax-fw-regular); }
.ax-select__opt.is-blank::after { display: none; }

.ax-select__list { max-block-size: 264px; overflow-y: auto; margin: 0; padding: 0; list-style: none; overscroll-behavior: contain; }
.ax-select__group {
  padding: var(--ax-sp-5) var(--ax-sp-5) var(--ax-sp-3);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  letter-spacing: var(--ax-tr-micro);
  text-transform: uppercase;
  color: var(--ax-text-subtle);
}
.ax-select__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ax-sp-5);
  min-block-size: 38px;
  padding: var(--ax-sp-3) var(--ax-sp-5);
  border-radius: var(--ax-r-xs);
  font-size: var(--ax-fs-sm);
  color: var(--ax-text-body);
  cursor: pointer;
  transition: background var(--ax-d-instant) var(--ax-ease), color var(--ax-d-instant) var(--ax-ease);
}
.ax-select__opt::before {              /* the spectral rail on the active row */
  content: "";
  position: absolute;
  inset-block: 7px;
  inset-inline-start: 0;
  inline-size: 2px;
  border-radius: 2px;
  background: var(--ax-grad-axis);
  transform: scaleY(0);
  transform-origin: 50% 50%;
  transition: transform var(--ax-d-base) var(--ax-ease-out);
}
.ax-select__opt.is-active { background: rgb(var(--ax-white-rgb) / .055); color: var(--ax-text-strong); }
.ax-select__opt.is-active::before { transform: scaleY(1); }
.ax-select__opt[aria-selected="true"] { color: var(--ax-cyan-bright); font-weight: var(--ax-fw-semibold); }
.ax-select__opt[aria-selected="true"]::after {
  content: "";
  inline-size: 14px; block-size: 8px;
  margin-inline-start: auto;
  flex: none;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -2px);
}
.ax-select__opt[aria-disabled="true"] { color: var(--ax-text-disabled); cursor: not-allowed; }
.ax-select__opt small { display: block; font-size: var(--ax-fs-3xs); color: var(--ax-text-subtle); }
.ax-select__empty { padding: var(--ax-sp-7); text-align: center; color: var(--ax-text-subtle); font-size: var(--ax-fs-xs); }

/* Native select fallback — styled so a raw asp:DropDownList is never ugly.
   Layer order matters: the first background layer paints on TOP, so the caret
   must come first or the opaque fill beneath it hides the caret entirely. */
.ax-native-select {
  padding-inline-end: 38px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238E9598' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(var(--ax-ink-100), var(--ax-ink-100)),
    var(--ax-edge-quiet);
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right var(--ax-sp-6) center, 0 0, 0 0;
  background-size: 12px 8px, auto, auto;
  cursor: pointer;
}
/* The hover/focus rules above re-declare the background shorthand, which
   would drop the caret — restate it for those states. */
.ax-native-select:hover, .ax-native-select:focus {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2361E3FF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(var(--ax-ink-150), var(--ax-ink-150)),
    var(--ax-edge-hi);
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right var(--ax-sp-6) center, 0 0, 0 0;
  background-size: 12px 8px, auto, auto;
}
.ax-native-select option { background: #19191B; color: #DDE1E3; }
.ax-native-select optgroup { background: #131214; color: #8E9598; font-style: normal; }


/* ═══ 10 · TOOLTIP · POPOVER ═════════════════════════════════════════════
   Position is computed by arxeon.tooltip.js: it measures the viewport and
   flips side, shifts along the cross axis, and moves its own arrow to stay
   on the anchor. The CSS only handles look and the enter transition.    */

.ax-tip {
  position: fixed;
  z-index: var(--ax-z-tooltip);
  max-inline-size: 264px;
  padding: var(--ax-sp-4) var(--ax-sp-5);
  border-radius: var(--ax-r-sm);
  background: var(--ax-ink-300);
  color: var(--ax-ink-950);
  font-size: var(--ax-fs-xs);
  font-weight: var(--ax-fw-medium);
  line-height: 1.45;
  letter-spacing: var(--ax-tr-tiny);
  box-shadow: var(--ax-el-3), 0 0 0 1px rgb(var(--ax-white-rgb)/.07);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, var(--ax-tip-from-y, 4px), 0) scale(.96);
  transition: opacity var(--ax-d-fast) var(--ax-ease-out),
              transform var(--ax-d-base) var(--ax-ease-out);
  text-wrap: pretty;
}
.ax-tip.is-in { opacity: 1; transform: none; }
.ax-tip__arrow {
  position: absolute;
  inline-size: 8px; block-size: 8px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 1px;
}
.ax-tip--rich { max-inline-size: 320px; padding: var(--ax-sp-6); text-align: start; }
.ax-tip--rich b { display: block; color: #fff; margin-block-end: 2px; font-size: var(--ax-fs-sm); }
.ax-tip--spec { background: linear-gradient(var(--ax-axis-grad), var(--ax-spec-6), var(--ax-spec-8)); color: #fff; }

.ax-popover {
  position: fixed;
  z-index: var(--ax-z-popover);
  min-inline-size: 220px;
  max-inline-size: 360px;
  padding: var(--ax-sp-6);
  border-radius: var(--ax-r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ax-ink-150), var(--ax-ink-150)) padding-box,
    var(--ax-edge) border-box;
  box-shadow: var(--ax-el-4);
  opacity: 0;
  transform: translate3d(0, 6px, 0) scale(.98);
  transition: opacity var(--ax-d-base) var(--ax-ease-out), transform var(--ax-d-slow) var(--ax-ease-out);
}
.ax-popover.is-in { opacity: 1; transform: none; }


/* ═══ 11 · MODAL · DRAWER ════════════════════════════════════════════════ */

.ax-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--ax-z-backdrop);
  background: rgb(var(--ax-black-rgb) / .72);
  -webkit-backdrop-filter: blur(6px) saturate(80%);
  backdrop-filter: blur(6px) saturate(80%);
  opacity: 0;
  transition: opacity var(--ax-d-base) var(--ax-ease);
}
.ax-backdrop.is-in { opacity: 1; }

.ax-modal {
  position: fixed;
  z-index: var(--ax-z-modal);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: min(560px, calc(100vw - 32px));
  max-block-size: min(88svh, 900px);
  display: flex;
  flex-direction: column;
  border-radius: var(--ax-r-xl);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ax-ink-150), var(--ax-ink-150)) padding-box,
    var(--ax-edge) border-box;
  box-shadow: var(--ax-el-5);
  opacity: 0;
  transform: translate(-50%, -46%) scale(.96);
  transition: opacity var(--ax-d-base) var(--ax-ease-out), transform var(--ax-d-slow) var(--ax-ease-out);
  overflow: hidden;
}
.ax-modal.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ax-modal::before {
  content: ""; position: absolute; inset-inline: 18%; inset-block-start: 0; block-size: 1px;
  background: var(--ax-grad-hair); pointer-events: none;
}
.ax-modal--lg { inline-size: min(820px, calc(100vw - 32px)); }
.ax-modal__head { padding: var(--ax-sp-8) var(--ax-sp-8) var(--ax-sp-6); display: flex; align-items: flex-start; gap: var(--ax-sp-6); }
.ax-modal__title { font-size: var(--ax-fs-xl); font-weight: var(--ax-fw-bold); letter-spacing: var(--ax-tr-lead); color: var(--ax-text-strong); }
.ax-modal__sub { margin-block-start: var(--ax-sp-3); color: var(--ax-text-muted); font-size: var(--ax-fs-sm); }
.ax-modal__body { padding: 0 var(--ax-sp-8) var(--ax-sp-8); overflow-y: auto; flex: 1 1 auto; }
.ax-modal__foot {
  display: flex; justify-content: flex-end; gap: var(--ax-sp-5);
  padding: var(--ax-sp-6) var(--ax-sp-8);
  border-block-start: 1px solid var(--ax-line);
  background: rgb(var(--ax-black-rgb)/.2);
}
.ax-modal__x {
  margin-inline-start: auto; flex: none;
  inline-size: 32px; block-size: 32px;
  display: grid; place-items: center;
  border-radius: var(--ax-r-xs);
  color: var(--ax-text-subtle);
  transition: var(--ax-t-color);
}
.ax-modal__x:hover { background: rgb(var(--ax-white-rgb)/.07); color: var(--ax-text-strong); }
@media (max-width: 639px) {
  .ax-modal__head, .ax-modal__body, .ax-modal__foot { padding-inline: var(--ax-sp-6); }
  .ax-modal__foot { flex-direction: column-reverse; }
  .ax-modal__foot .ax-btn { inline-size: 100%; }
}

.ax-drawer {
  position: fixed;
  z-index: var(--ax-z-modal);
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--ax-ink-100);
  border-inline-start: 1px solid var(--ax-line-strong);
  box-shadow: var(--ax-el-5);
  transform: translateX(100%);
  transition: transform var(--ax-d-slow) var(--ax-ease-out);
}
.ax-drawer.is-in { transform: none; }


/* ═══ 12 · TOAST · ALERT · EMPTY ═════════════════════════════════════════ */

.ax-toast-region {
  position: fixed;
  z-index: var(--ax-z-toast);
  inset-block-end: var(--ax-sp-8);
  inset-inline-end: var(--ax-sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--ax-sp-5);
  pointer-events: none;
  max-inline-size: min(400px, calc(100vw - 32px));
}
@media (max-width: 639px) { .ax-toast-region { inset-inline: var(--ax-sp-6); inset-block-end: var(--ax-sp-6); max-inline-size: none; } }

.ax-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--ax-sp-5);
  padding: var(--ax-sp-6);
  border-radius: var(--ax-r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ax-ink-200), var(--ax-ink-200)) padding-box,
    var(--ax-edge) border-box;
  box-shadow: var(--ax-el-4);
  pointer-events: auto;
  overflow: hidden;
  opacity: 0;
  transform: translateX(24px) scale(.97);
  transition: opacity var(--ax-d-base) var(--ax-ease-out),
              transform var(--ax-d-slow) var(--ax-ease-out),
              margin var(--ax-d-slow) var(--ax-ease-out);
}
.ax-toast.is-in { opacity: 1; transform: none; }
.ax-toast.is-out { opacity: 0; transform: translateX(24px) scale(.97); margin-block-end: -66px; }
.ax-toast__icon { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 1px; color: var(--ax-cyan); }
.ax-toast__body { flex: 1 1 auto; min-inline-size: 0; }
.ax-toast__title { font-size: var(--ax-fs-sm); font-weight: var(--ax-fw-semibold); color: var(--ax-text-strong); }
.ax-toast__msg { font-size: var(--ax-fs-xs); color: var(--ax-text-muted); margin-block-start: 2px; line-height: 1.5; }
.ax-toast__bar {
  position: absolute;
  inset-block-end: 0; inset-inline-start: 0;
  block-size: 2px;
  inline-size: 100%;
  background: var(--ax-grad-sweep);
  transform-origin: 0 50%;
  animation: ax-toast-bar var(--ax-toast-life, 4600ms) linear forwards;
}
@keyframes ax-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ax-toast--success .ax-toast__icon { color: var(--ax-success); }
.ax-toast--success .ax-toast__bar { background: var(--ax-success); }
.ax-toast--danger  .ax-toast__icon { color: var(--ax-danger); }
.ax-toast--danger  .ax-toast__bar { background: var(--ax-danger); }
.ax-toast--warning .ax-toast__icon { color: var(--ax-warning); }
.ax-toast--warning .ax-toast__bar { background: var(--ax-warning); }

.ax-alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--ax-sp-5);
  padding: var(--ax-sp-6) var(--ax-sp-7);
  border-radius: var(--ax-r-md);
  font-size: var(--ax-fs-sm);
  line-height: 1.55;
  color: var(--ax-text-body);
  background: rgb(var(--ax-white-rgb)/.04);
  border: 1px solid rgb(var(--ax-white-rgb)/.07);
  overflow: hidden;
}
.ax-alert::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 2px; background: currentColor; opacity: .8; }
.ax-alert__icon { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 1px; }
.ax-alert b { color: var(--ax-text-strong); }
.ax-alert--info    { color: var(--ax-info);    background: rgb(var(--ax-cyan-rgb)/.07);    border-color: rgb(var(--ax-cyan-rgb)/.20); }
.ax-alert--success { color: var(--ax-success); background: rgb(var(--ax-success-rgb)/.07); border-color: rgb(var(--ax-success-rgb)/.20); }
.ax-alert--warning { color: var(--ax-warning); background: rgb(var(--ax-warning-rgb)/.07); border-color: rgb(var(--ax-warning-rgb)/.20); }
.ax-alert--danger  { color: var(--ax-danger);  background: rgb(var(--ax-danger-rgb)/.07);  border-color: rgb(var(--ax-danger-rgb)/.20); }
.ax-alert__text { color: var(--ax-text-body); flex: 1 1 auto; min-inline-size: 0; }

.ax-empty { display: grid; place-items: center; gap: var(--ax-sp-5); padding: var(--ax-sp-13) var(--ax-sp-8); text-align: center; }
.ax-empty__art {
  inline-size: 68px; block-size: 68px;
  display: grid; place-items: center;
  border-radius: var(--ax-r-lg);
  background: rgb(var(--ax-white-rgb)/.04);
  border: 1px solid var(--ax-line);
  color: var(--ax-text-subtle);
}
.ax-empty__title { font-size: var(--ax-fs-lg); font-weight: var(--ax-fw-semibold); color: var(--ax-text-strong); }
.ax-empty__msg { font-size: var(--ax-fs-sm); color: var(--ax-text-subtle); max-inline-size: 42ch; }


/* ═══ 13 · TABS · ACCORDION · BREADCRUMB · PAGINATION ════════════════════ */

.ax-tabs { position: relative; display: flex; gap: var(--ax-sp-2); border-block-end: 1px solid var(--ax-line); overflow-x: auto; scrollbar-width: none; }
.ax-tabs::-webkit-scrollbar { display: none; }
.ax-tab {
  position: relative;
  padding: var(--ax-sp-5) var(--ax-sp-6);
  font-size: var(--ax-fs-sm);
  font-weight: var(--ax-fw-medium);
  color: var(--ax-text-subtle);
  white-space: nowrap;
  transition: color var(--ax-d-fast) var(--ax-ease);
}
.ax-tab:hover { color: var(--ax-text-body); }
.ax-tab[aria-selected="true"] { color: var(--ax-text-strong); font-weight: var(--ax-fw-semibold); }
.ax-tabs__ink {
  position: absolute;
  inset-block-end: -1px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--ax-grad-sweep);
  box-shadow: 0 0 14px rgb(var(--ax-cyan-rgb)/.5);
  transition: transform var(--ax-d-slow) var(--ax-ease-out), inline-size var(--ax-d-slow) var(--ax-ease-out);
  pointer-events: none;
}
.ax-tabpanel { padding-block-start: var(--ax-sp-8); }
.ax-tabpanel[hidden] { display: none; }
.ax-tabpanel.is-in { animation: ax-fade-up var(--ax-d-slow) var(--ax-ease-out); }
@keyframes ax-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ax-accordion { border-block-start: 1px solid var(--ax-line); }
.ax-acc {
  border-block-end: 1px solid var(--ax-line);
}
.ax-acc__btn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--ax-sp-6);
  padding: var(--ax-sp-7) var(--ax-sp-2);
  text-align: start;
  font-size: var(--ax-fs-md);
  font-weight: var(--ax-fw-semibold);
  letter-spacing: var(--ax-tr-body);
  color: var(--ax-text);
  transition: color var(--ax-d-fast) var(--ax-ease);
}
.ax-acc__btn:hover { color: var(--ax-text-strong); }
.ax-acc__btn[aria-expanded="true"] { color: var(--ax-cyan-bright); }
.ax-acc__sign { margin-inline-start: auto; flex: none; position: relative; inline-size: 14px; block-size: 14px; }
.ax-acc__sign::before, .ax-acc__sign::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 6px;
  inline-size: 14px; block-size: 2px; border-radius: 1px; background: currentColor;
  transition: transform var(--ax-d-slow) var(--ax-ease-out);
}
.ax-acc__sign::after { transform: rotate(90deg); }
.ax-acc__btn[aria-expanded="true"] .ax-acc__sign::after { transform: rotate(0deg); }
.ax-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ax-d-slow) var(--ax-ease-out);
}
.ax-acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.ax-acc__inner { overflow: hidden; }
.ax-acc__inner > div { padding: 0 var(--ax-sp-2) var(--ax-sp-8); color: var(--ax-text-muted); font-size: var(--ax-fs-sm); line-height: 1.65; max-inline-size: 72ch; }

.ax-crumbs { display: flex; align-items: center; gap: var(--ax-sp-3); font-size: var(--ax-fs-xs); color: var(--ax-text-subtle); flex-wrap: wrap; }
.ax-crumbs a { display: inline-flex; align-items: center; min-block-size: 26px; color: var(--ax-text-muted); text-decoration: none; transition: color var(--ax-d-fast) var(--ax-ease); }
.ax-crumbs a:hover { color: var(--ax-cyan); }
.ax-crumbs__sep { opacity: .45; transform: skewX(var(--ax-axis)); display: inline-block; }
.ax-crumbs [aria-current="page"] { color: var(--ax-text-strong); }

.ax-pager { display: flex; align-items: center; gap: var(--ax-sp-3); }
.ax-pager a, .ax-pager button, .ax-pager span {
  min-inline-size: 36px; block-size: 36px;
  display: grid; place-items: center;
  padding-inline: var(--ax-sp-4);
  border-radius: var(--ax-r-xs);
  font-size: var(--ax-fs-xs);
  font-weight: var(--ax-fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--ax-text-muted);
  text-decoration: none;
  transition: var(--ax-t-color);
}
.ax-pager a:hover, .ax-pager button:hover { background: rgb(var(--ax-white-rgb)/.06); color: var(--ax-text-strong); }
.ax-pager [aria-current="page"] {
  color: var(--ax-cyan-bright);
  font-weight: var(--ax-fw-bold);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ax-ink-150), var(--ax-ink-100)) padding-box,
    var(--ax-edge-hi) border-box;
  box-shadow: 0 4px 16px -8px rgb(var(--ax-cyan-rgb)/.45);
}


/* ═══ 14 · STEPPER · TIMELINE ════════════════════════════════════════════ */

.ax-steps { display: flex; gap: var(--ax-sp-2); counter-reset: ax-step; }
.ax-step { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--ax-sp-4); }
.ax-step__bar { block-size: 3px; border-radius: 2px; background: var(--ax-ink-300); overflow: hidden; position: relative; }
.ax-step__bar::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ax-grad-sweep);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--ax-d-slower) var(--ax-ease-out);
}
.ax-step.is-done .ax-step__bar::after, .ax-step.is-current .ax-step__bar::after { transform: scaleX(1); }
.ax-step.is-current .ax-step__bar::after { transform: scaleX(.5); }
.ax-step__label { font-size: var(--ax-fs-xs); color: var(--ax-text-subtle); display: flex; align-items: center; gap: var(--ax-sp-3); }
.ax-step.is-current .ax-step__label, .ax-step.is-done .ax-step__label { color: var(--ax-text-body); }
.ax-step__n { font-family: var(--ax-font-mono); font-size: var(--ax-fs-3xs); color: var(--ax-cyan); }

.ax-timeline { position: relative; padding-inline-start: var(--ax-sp-9); }
.ax-timeline::before {
  content: ""; position: absolute; inset-block: 6px 6px; inset-inline-start: 5px; inline-size: 1px;
  background: linear-gradient(var(--ax-spec-0), var(--ax-spec-6) 60%, transparent);
  opacity: .45;
}
.ax-tl-item { position: relative; padding-block-end: var(--ax-sp-9); }
.ax-tl-item:last-child { padding-block-end: 0; }
.ax-tl-item::before {
  content: ""; position: absolute;
  inset-inline-start: calc(-1 * var(--ax-sp-9) + 1px);
  inset-block-start: 6px;
  inline-size: 9px; block-size: 9px;
  border-radius: 50%;
  background: var(--ax-ink-050);
  border: 2px solid var(--ax-spec-4);
}
.ax-tl-item.is-now::before { background: var(--ax-spec-0); box-shadow: 0 0 12px rgb(var(--ax-cyan-rgb)/.8); }
.ax-tl-item__when { font-family: var(--ax-font-mono); font-size: var(--ax-fs-3xs); letter-spacing: .05em; text-transform: uppercase; color: var(--ax-text-subtle); }
.ax-tl-item__title { font-size: var(--ax-fs-md); font-weight: var(--ax-fw-semibold); color: var(--ax-text-strong); margin-block-start: 3px; }


/* ═══ 15 · LOADERS · SKELETON · PROGRESS ═════════════════════════════════ */

/* Prism spinner: two counter-rotating spectral arcs. */
.ax-spinner {
  position: relative;
  inline-size: 28px; block-size: 28px;
  flex: none;
}
.ax-spinner::before, .ax-spinner::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: ax-spin 1.05s linear infinite;
}
.ax-spinner::before { border-block-start-color: var(--ax-spec-0); border-inline-end-color: var(--ax-spec-3); }
.ax-spinner::after  { inset: 5px; border-block-end-color: var(--ax-spec-8); border-inline-start-color: var(--ax-spec-6); animation-duration: 1.5s; animation-direction: reverse; }
.ax-spinner--sm { inline-size: 18px; block-size: 18px; }
.ax-spinner--sm::after { inset: 4px; }
.ax-spinner--lg { inline-size: 46px; block-size: 46px; }
.ax-spinner--lg::after { inset: 8px; }

/* ── THE MARK LOADER ──────────────────────────────────────────────────────
   Not a stylised echo of the logo — the logo itself. Images/Arxeon-mark-loader.svg
   carries the same eleven <path> elements, byte-for-byte, from the purchased
   artwork, on the same viewBox, filled by the same nine-stop gradient. Its
   animation lives inside the file, so one <img> is the whole component and it
   honours prefers-reduced-motion on its own (at which point it is simply the
   logo, at rest).

     <img class="ax-mark-loader" src="Images/Arxeon-mark-loader.svg" alt="Loading">

   Its sibling Arxeon-mark-logo.svg runs the identical sweep but waits 7.8s
   between repeats — that is the one for the header.

   At rest it is the mark exactly as drawn. The animation only ADDS light: a
   wave crosses the fan from the longest blade to the shortest, 58ms apart,
   each blade swelling 4% from its own base as it catches. */

.ax-mark-loader {
  inline-size: auto;
  block-size: 44px;
  aspect-ratio: 1377.4 / 1220.9;   /* the artwork's measured bounds */
  flex: none;
  filter: drop-shadow(0 0 14px rgb(var(--ax-cyan-rgb) / .22));
}
.ax-mark-loader--sm { block-size: 26px; }
.ax-mark-loader--lg { block-size: 84px; filter: drop-shadow(0 0 26px rgb(var(--ax-cyan-rgb) / .28)); }

/* Compact bar variant — for 20px rows where eleven hairline blades would
   disappear. Same eleven elements, same 30deg lean. */
.ax-blades { display: flex; align-items: flex-end; gap: 3px; block-size: 26px; }
.ax-blades i {
  display: block;
  inline-size: 3px;
  block-size: 100%;
  border-radius: 2px;
  transform: skewX(var(--ax-axis));
  background: linear-gradient(var(--ax-axis-fill), var(--ax-spec-0), var(--ax-spec-8));
  transform-origin: 50% 100%;
  animation: ax-blade-pulse 1.15s var(--ax-ease-in-out) infinite;
}
.ax-blades i:nth-child(1){animation-delay:0ms}    .ax-blades i:nth-child(2){animation-delay:70ms}
.ax-blades i:nth-child(3){animation-delay:140ms}  .ax-blades i:nth-child(4){animation-delay:210ms}
.ax-blades i:nth-child(5){animation-delay:280ms}  .ax-blades i:nth-child(6){animation-delay:350ms}
.ax-blades i:nth-child(7){animation-delay:420ms}  .ax-blades i:nth-child(8){animation-delay:490ms}
.ax-blades i:nth-child(9){animation-delay:560ms}  .ax-blades i:nth-child(10){animation-delay:630ms}
.ax-blades i:nth-child(11){animation-delay:700ms}
@keyframes ax-blade-pulse {
  0%, 100% { transform: skewX(var(--ax-axis)) scaleY(.22); opacity: .38; }
  50%      { transform: skewX(var(--ax-axis)) scaleY(1);   opacity: 1; }
}

/* Top-of-page progress bar (for postbacks). */
.ax-topbar {
  position: fixed;
  inset-block-start: 0; inset-inline: 0;
  block-size: 2px;
  z-index: var(--ax-z-toast);
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ax-d-base) var(--ax-ease);
}
.ax-topbar.is-on { opacity: 1; }
.ax-topbar::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 40%;
  background: var(--ax-grad-sweep);
  box-shadow: 0 0 14px rgb(var(--ax-cyan-rgb)/.7);
  animation: ax-topbar-run 1.2s var(--ax-ease-in-out) infinite;
}
@keyframes ax-topbar-run {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(280%); }
}

.ax-dots { display: inline-flex; gap: 5px; align-items: center; }
.ax-dots i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ax-spec-3); animation: ax-dot-bob 1.1s var(--ax-ease-in-out) infinite; }
.ax-dots i:nth-child(2) { animation-delay: .13s; background: var(--ax-spec-5); }
.ax-dots i:nth-child(3) { animation-delay: .26s; background: var(--ax-spec-7); }
@keyframes ax-dot-bob { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-5px); opacity: 1; } }

.ax-skeleton {
  position: relative;
  border-radius: var(--ax-r-xs);
  background: var(--ax-ink-200);
  overflow: hidden;
}
.ax-skeleton::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -160%;
  inline-size: 160%;
  transform: skewX(var(--ax-axis));
  background: linear-gradient(90deg, transparent, rgb(var(--ax-white-rgb)/.07) 46%, rgb(var(--ax-cyan-rgb)/.08) 54%, transparent);
  animation: ax-shimmer 1.5s var(--ax-ease-in-out) infinite;
}
@keyframes ax-shimmer { to { inset-inline-start: 160%; } }
.ax-skeleton--text { block-size: 11px; border-radius: var(--ax-r-full); }
.ax-skeleton--title { block-size: 20px; border-radius: var(--ax-r-full); }
.ax-skeleton--circle { border-radius: 50%; }

.ax-progress { block-size: 6px; border-radius: var(--ax-r-full); background: var(--ax-ink-200); overflow: hidden; }
.ax-progress__fill {
  block-size: 100%;
  border-radius: inherit;
  background: var(--ax-grad-sweep);
  box-shadow: 0 0 14px -2px rgb(var(--ax-cyan-rgb)/.6);
  transition: inline-size var(--ax-d-slower) var(--ax-ease-out);
}
.ax-ring { transform: rotate(-90deg); }
.ax-ring circle { fill: none; stroke-linecap: round; }
.ax-ring__track { stroke: var(--ax-ink-300); }
.ax-ring__fill  { stroke: url(#ax-ring-grad); transition: stroke-dashoffset var(--ax-d-slower) var(--ax-ease-out); }


/* ═══ 16 · TABLE · STAT · CODE ═══════════════════════════════════════════ */

.ax-table-wrap { inline-size: 100%; overflow-x: auto; border-radius: var(--ax-r-md); border: 1px solid var(--ax-line); background: var(--ax-ink-100); }
.ax-table { inline-size: 100%; min-inline-size: 560px; font-size: var(--ax-fs-sm); border-collapse: separate; border-spacing: 0; }
.ax-table thead th {
  position: sticky; inset-block-start: 0; z-index: 1;
  padding: var(--ax-sp-5) var(--ax-sp-6);
  text-align: start;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  font-weight: var(--ax-fw-medium);
  letter-spacing: var(--ax-tr-micro);
  text-transform: uppercase;
  color: var(--ax-text-subtle);
  background: var(--ax-ink-150);
  border-block-end: 1px solid var(--ax-line);
  white-space: nowrap;
}
.ax-table tbody td { padding: var(--ax-sp-6); border-block-end: 1px solid var(--ax-line-soft); color: var(--ax-text-body); vertical-align: middle; }
.ax-table tbody tr { transition: background var(--ax-d-fast) var(--ax-ease); }
.ax-table tbody tr:hover { background: rgb(var(--ax-white-rgb)/.028); }
.ax-table tbody tr:last-child td { border-block-end: 0; }
.ax-table .ax-num { text-align: end; font-variant-numeric: tabular-nums; }

.ax-stat {
  display: flex;
  flex-direction: column;
  gap: var(--ax-sp-3);
  padding: var(--ax-sp-7);
  border-radius: var(--ax-r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ax-ink-100), var(--ax-ink-100)) padding-box,
    var(--ax-edge-quiet) border-box;
}
.ax-stat__k { font-family: var(--ax-font-mono); font-size: var(--ax-fs-3xs); letter-spacing: var(--ax-tr-micro); text-transform: uppercase; color: var(--ax-text-subtle); }
.ax-stat__v {
  font-size: var(--ax-fs-3xl);
  font-weight: var(--ax-fw-heavy);
  letter-spacing: var(--ax-tr-head);
  line-height: 1;
  color: var(--ax-text-strong);
  font-variant-numeric: tabular-nums;
}
.ax-stat__d { font-size: var(--ax-fs-xs); color: var(--ax-text-subtle); }

.ax-code {
  position: relative;
  padding: var(--ax-sp-7);
  border-radius: var(--ax-r-md);
  background: var(--ax-ink-025);
  border: 1px solid var(--ax-line);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-xs);
  line-height: 1.72;
  color: var(--ax-ink-800);
  overflow-x: auto;
  tab-size: 2;
}
.ax-code .c { color: var(--ax-text-subtle); font-style: italic; }
.ax-code .k { color: var(--ax-violet-bright); }
.ax-code .s { color: var(--ax-success); }
.ax-code .v { color: var(--ax-cyan-bright); }
.ax-code .n { color: var(--ax-warning); }
.ax-code__copy {
  position: absolute;
  inset-block-start: var(--ax-sp-4);
  inset-inline-end: var(--ax-sp-4);
  padding: var(--ax-sp-2) var(--ax-sp-4);
  border-radius: var(--ax-r-xs);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-fs-3xs);
  color: var(--ax-text-subtle);
  background: rgb(var(--ax-white-rgb)/.05);
  opacity: 0;
  transition: opacity var(--ax-d-fast) var(--ax-ease), color var(--ax-d-fast) var(--ax-ease);
}
.ax-code:hover .ax-code__copy, .ax-code__copy:focus-visible { opacity: 1; }
.ax-code__copy:hover { color: var(--ax-cyan); }


/* ═══ 17 · HEADER · FOOTER · MARKETING ═══════════════════════════════════ */

.ax-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--ax-z-header);
  transition: background var(--ax-d-slow) var(--ax-ease),
              box-shadow var(--ax-d-slow) var(--ax-ease),
              border-color var(--ax-d-slow) var(--ax-ease);
  border-block-end: 1px solid transparent;
}
.ax-header.is-stuck {
  background: rgb(10 10 10 / .78);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-block-end-color: var(--ax-line);
  box-shadow: 0 12px 40px -24px rgb(var(--ax-black-rgb)/.9);
}
@supports not (backdrop-filter: blur(1px)) { .ax-header.is-stuck { background: rgb(10 10 10 / .97); } }
.ax-header__bar { display: flex; align-items: center; gap: var(--ax-sp-8); block-size: 72px; }
.ax-nav { display: flex; align-items: center; gap: var(--ax-sp-2); margin-inline-start: var(--ax-sp-6); }
.ax-nav a {
  position: relative;
  padding: var(--ax-sp-4) var(--ax-sp-5);
  border-radius: var(--ax-r-xs);
  font-size: var(--ax-fs-sm);
  font-weight: var(--ax-fw-medium);
  color: var(--ax-text-muted);
  text-decoration: none;
  transition: color var(--ax-d-fast) var(--ax-ease);
}
.ax-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 2px;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--ax-grad-sweep);
  transform: translateX(-50%);
  transition: inline-size var(--ax-d-base) var(--ax-ease-out);
}
.ax-nav a:hover { color: var(--ax-text-strong); }
.ax-nav a:hover::after, .ax-nav a[aria-current="page"]::after { inline-size: 18px; }
.ax-nav a[aria-current="page"] { color: var(--ax-text-strong); }

.ax-burger { display: none; inline-size: 40px; block-size: 40px; place-items: center; border-radius: var(--ax-r-xs); color: var(--ax-text); }
.ax-burger span { position: relative; display: block; inline-size: 18px; block-size: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--ax-d-base) var(--ax-ease-out), opacity var(--ax-d-fast) var(--ax-ease); }
.ax-burger span::before, .ax-burger span::after { content: ""; position: absolute; inset-inline-start: 0; inline-size: 18px; block-size: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--ax-d-base) var(--ax-ease-out); }
.ax-burger span::before { inset-block-start: -6px; }
.ax-burger span::after  { inset-block-start: 6px; }
.ax-burger[aria-expanded="true"] span { background: transparent; }
.ax-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.ax-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.ax-mobile-nav {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ax-d-slow) var(--ax-ease-out);
  border-block-start: 1px solid transparent;
}
.ax-mobile-nav[data-open="true"] { grid-template-rows: 1fr; border-block-start-color: var(--ax-line); }
.ax-mobile-nav > div { overflow: hidden; }
.ax-mobile-nav nav { display: flex; flex-direction: column; gap: var(--ax-sp-2); padding-block: var(--ax-sp-6); }
.ax-mobile-nav a { padding: var(--ax-sp-5); border-radius: var(--ax-r-sm); color: var(--ax-text-body); text-decoration: none; font-size: var(--ax-fs-md); font-weight: var(--ax-fw-medium); }
.ax-mobile-nav a:hover { background: rgb(var(--ax-white-rgb)/.05); color: var(--ax-text-strong); }

@media (max-width: 1023px) {
  .ax-nav, .ax-header__cta { display: none; }
  .ax-burger { display: grid; margin-inline-start: auto; }
}

.ax-hero { position: relative; padding-block: clamp(4rem, 2rem + 9vw, 9rem) var(--ax-section); overflow: hidden; }
.ax-hero__glow {
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: 50%;
  inline-size: min(1100px, 130%);
  aspect-ratio: 1.6;
  translate: -50% 0;
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--ax-cyan-rgb)/.16), transparent 70%),
              radial-gradient(40% 40% at 66% 58%, rgb(var(--ax-violet-rgb)/.14), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
}

.ax-feature { display: flex; flex-direction: column; gap: var(--ax-sp-5); }
.ax-feature__icon {
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  border-radius: var(--ax-r-sm);
  color: var(--ax-cyan-bright);
  background: rgb(var(--ax-cyan-rgb)/.09);
  border: 1px solid rgb(var(--ax-cyan-rgb)/.20);
  transition: var(--ax-t-lift), background var(--ax-d-base) var(--ax-ease);
}
.ax-card--interactive:hover .ax-feature__icon { background: rgb(var(--ax-cyan-rgb)/.16); transform: translateY(-2px); }

.ax-logo-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ax-sp-11); opacity: .55; }
.ax-logo-cloud > * { filter: grayscale(1) brightness(1.6); transition: filter var(--ax-d-slow) var(--ax-ease), opacity var(--ax-d-slow) var(--ax-ease); }
.ax-logo-cloud > *:hover { filter: none; }

.ax-price { display: flex; align-items: baseline; gap: var(--ax-sp-3); }
.ax-price__amt { font-size: var(--ax-fs-4xl); font-weight: var(--ax-fw-heavy); letter-spacing: var(--ax-tr-display); color: var(--ax-text-strong); line-height: 1; }
.ax-price__per { font-size: var(--ax-fs-sm); color: var(--ax-text-subtle); }
.ax-plan-list { display: flex; flex-direction: column; gap: var(--ax-sp-5); font-size: var(--ax-fs-sm); color: var(--ax-text-muted); }
.ax-plan-list li { display: flex; align-items: flex-start; gap: var(--ax-sp-5); }
.ax-plan-list li::before {
  content: ""; flex: none; margin-block-start: 5px;
  inline-size: 13px; block-size: 7px;
  border-inline-start: 1.75px solid var(--ax-cyan);
  border-block-end: 1.75px solid var(--ax-cyan);
  transform: rotate(-45deg);
}

.ax-cta {
  position: relative;
  padding: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);
  border-radius: var(--ax-r-2xl);
  text-align: center;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ax-ink-100), var(--ax-ink-100)) padding-box,
    var(--ax-edge-hi) border-box;
}
.ax-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 50% 0%, rgb(var(--ax-cyan-rgb)/.14), transparent 62%),
              radial-gradient(60% 100% at 82% 100%, rgb(var(--ax-violet-rgb)/.13), transparent 65%);
}
.ax-cta > * { position: relative; z-index: 1; }

.ax-footer { border-block-start: 1px solid var(--ax-line); padding-block: var(--ax-sp-13) var(--ax-sp-9); margin-block-start: var(--ax-section); }
.ax-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--ax-sp-11); }
@media (max-width: 900px) { .ax-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ax-footer__grid { grid-template-columns: 1fr; } }
.ax-footer h6 { font-family: var(--ax-font-mono); font-size: var(--ax-fs-3xs); letter-spacing: var(--ax-tr-micro); text-transform: uppercase; color: var(--ax-text-subtle); margin-block-end: var(--ax-sp-6); }
.ax-footer nav { display: flex; flex-direction: column; gap: var(--ax-sp-5); }
.ax-footer nav a { display: inline-flex; align-items: center; min-block-size: 26px; font-size: var(--ax-fs-sm); color: var(--ax-text-muted); text-decoration: none; transition: color var(--ax-d-fast) var(--ax-ease); width: fit-content; }
.ax-footer nav a:hover { color: var(--ax-cyan); }
.ax-footer__base { display: flex; flex-wrap: wrap; gap: var(--ax-sp-6); justify-content: space-between; align-items: center; margin-block-start: var(--ax-sp-11); padding-block-start: var(--ax-sp-7); border-block-start: 1px solid var(--ax-line); font-size: var(--ax-fs-xs); color: var(--ax-text-subtle); }


/* ═══ 18 · SITE CHROME ════════════════════════════════════════════════════
   THE SPECTRUM IS THE SITE MAP.

   Arxeon is one company split into disciplines, and its mark is one light
   split into a spectrum. So the disciplines ARE the spectrum, in order of
   how near they are to the core of the business:

       health technology   spec-0   cyan     the tip
       AI & models         spec-3
       web & software      spec-6
       construction        spec-8   violet   the base

   That ordering is not decoration. It is the company, and it is why the
   navigation can be colour-coded without inventing a palette: every section
   already has a position on a ramp that exists.

   THE RAIL is the mechanism. A 1px spectrum runs the full width beneath the
   header, and a short bright node sits on it. The node is not tinted by
   script — it is a WINDOW ONTO THE SAME GRADIENT, sized to the rail and
   offset by its own position, so it shows exactly the slice of spectrum it
   is standing on. Move it under "Construction" and it is violet because it
   is at the violet end, not because anything told it to be.
   ===================================================================== */

.ax-shell { display: flex; flex-direction: column; min-block-size: 100svh; }
.ax-shell > main { flex: 1 0 auto; }

/* ── the rail ─────────────────────────────────────────────────────────── */

.ax-rail {
  position: relative;
  block-size: 1px;
  inline-size: 100%;
  background: var(--ax-grad-sweep);
  opacity: .22;
  transition: opacity var(--ax-d-slow) var(--ax-ease);
}
.ax-header:hover .ax-rail, .ax-header.is-stuck .ax-rail { opacity: .34; }

.ax-rail__node {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  block-size: 3px;
  inline-size: var(--ax-node-w, 0px);
  border-radius: 2px;
  transform: translate3d(var(--ax-node-x, 0px), 0, 0);
  /* the window onto the spectrum: same image, rail-sized, shifted back by
     exactly the distance the node has travelled */
  background-image: var(--ax-grad-sweep);
  background-size: var(--ax-rail-w, 100%) 100%;
  background-position: calc(-1 * var(--ax-node-x, 0px)) 0;
  filter: drop-shadow(0 0 10px rgb(var(--ax-cyan-rgb) / .45));
  opacity: 0;
  transition: transform var(--ax-d-slow) var(--ax-ease-out),
              inline-size var(--ax-d-slow) var(--ax-ease-out),
              background-position var(--ax-d-slow) var(--ax-ease-out),
              opacity var(--ax-d-base) var(--ax-ease);
  pointer-events: none;
}
.ax-rail__node.is-on { opacity: 1; }

/* A nav that delegates its wayfinding to the rail does not also underline
   itself — two indicators for one state is one too many. */
.ax-nav--rail a::after, .ax-nav--rail button::after { display: none; }
.ax-nav--rail { gap: var(--ax-sp-2); }

.ax-nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-3);
  block-size: 36px;
  padding-inline: var(--ax-sp-5);
  border-radius: var(--ax-r-xs);
  font-size: var(--ax-fs-sm);
  font-weight: var(--ax-fw-medium);
  color: var(--ax-text-muted);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--ax-d-fast) var(--ax-ease), background var(--ax-d-fast) var(--ax-ease);
}
.ax-nav__item:hover { color: var(--ax-text-strong); }
.ax-nav__item[aria-current="page"] { color: var(--ax-text-strong); }
.ax-nav__item[aria-expanded="true"] { color: var(--ax-text-strong); background: rgb(var(--ax-white-rgb)/.05); }
.ax-nav__caret {
  inline-size: 11px; block-size: 11px;
  opacity: .7;
  transition: transform var(--ax-d-base) var(--ax-ease-out);
}
.ax-nav__item[aria-expanded="true"] .ax-nav__caret { transform: rotate(180deg); }


/* ── the mega panel ───────────────────────────────────────────────────── */

.ax-mega {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  z-index: var(--ax-z-header);
  border-block-end: 1px solid var(--ax-line);
  /* .88 let the hero headline ghost through the panel and it read as a
     rendering fault rather than glass. Glass still has to be opaque enough
     to be a surface. */
  background: rgb(14 13 15 / .96);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  box-shadow: 0 32px 80px -40px rgb(var(--ax-black-rgb) / .95);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--ax-d-base) var(--ax-ease-out),
              transform var(--ax-d-slow) var(--ax-ease-out),
              visibility 0s linear var(--ax-d-slow);
}
@supports not (backdrop-filter: blur(1px)) { .ax-mega { background: rgb(15 14 16 / .99); } }
.ax-mega.is-open {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.ax-mega__inner { padding-block: var(--ax-sp-10) var(--ax-sp-11); }
.ax-mega__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 1.15fr;
  gap: var(--ax-sp-9);
  /* stretch, not start: the disciplines have different amounts to say, and
     four "Explore" links on four different baselines looks like a mistake */
  align-items: stretch;
}
.ax-mega__grid .ax-div__body,
.ax-mega__feature .ax-div__body { flex: 1 1 auto; }
@media (max-width: 1279px) {
  .ax-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-mega__feature { grid-column: 1 / -1; }
}

/* ── a division ───────────────────────────────────────────────────────────
   --div-stop is the discipline's own point on the ramp. Set it once on the
   element and the rail, the icon and the hover all follow from it.       */

.ax-div {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ax-sp-4);
  padding-block-start: var(--ax-sp-6);
  text-decoration: none;
  color: inherit;
  transition: transform var(--ax-d-base) var(--ax-ease-out);
}
.ax-div::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: 26px;
  border-radius: 2px;
  background: var(--div-stop, var(--ax-cyan));
  transition: inline-size var(--ax-d-slow) var(--ax-ease-out),
              box-shadow var(--ax-d-base) var(--ax-ease);
}
.ax-div:hover { transform: translateY(-2px); }
.ax-div:hover::before,
.ax-div:focus-visible::before {
  inline-size: 100%;
  box-shadow: 0 0 14px -1px var(--div-stop, var(--ax-cyan));
}
.ax-div__eyebrow {
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  letter-spacing: var(--ax-tr-micro);
  text-transform: uppercase;
  color: var(--div-stop, var(--ax-cyan));
}
.ax-div__title {
  font-size: var(--ax-fs-lg);
  font-weight: var(--ax-fw-bold);
  letter-spacing: var(--ax-tr-lead);
  color: var(--ax-text-strong);
}
.ax-div__body { font-size: var(--ax-fs-sm); line-height: 1.6; color: var(--ax-text-muted); text-wrap: pretty; }
.ax-div__more {
  margin-block-start: var(--ax-sp-2);
  font-size: var(--ax-fs-xs);
  font-weight: var(--ax-fw-semibold);
  color: var(--ax-text-subtle);
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-3);
  transition: color var(--ax-d-fast) var(--ax-ease), gap var(--ax-d-base) var(--ax-ease-out);
}
.ax-div:hover .ax-div__more { color: var(--div-stop, var(--ax-cyan)); gap: var(--ax-sp-5); }

/* the featured panel that closes the mega */
.ax-mega__feature {
  position: relative;
  padding: var(--ax-sp-8);
  border-radius: var(--ax-r-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ax-ink-150), var(--ax-ink-150)) padding-box,
    var(--ax-edge) border-box;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--ax-sp-5);
  transition: var(--ax-t-lift), background var(--ax-d-base) var(--ax-ease);
}
/* In a column flex container the default align-items:stretch pulls an
   inline-flex badge out to the full width, and it stops looking like a badge. */
.ax-mega__feature > .ax-badge { align-self: flex-start; }
.ax-mega__feature:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(var(--ax-ink-200), var(--ax-ink-200)) padding-box,
    var(--ax-edge-hi) border-box;
  box-shadow: var(--ax-el-3);
}


/* ── the mobile sheet ─────────────────────────────────────────────────────
   A full-height surface rather than an accordion: at phone size the menu IS
   the page while it is open, so it gets the whole viewport, a scroll lock,
   and a focus trap. Items arrive in sequence along the same 30deg axis
   everything else in this system travels on.                             */

.ax-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--ax-z-drawer);
  display: flex;
  flex-direction: column;
  background: rgb(10 10 10 / .96);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ax-d-base) var(--ax-ease-out),
              visibility 0s linear var(--ax-d-base);
  overscroll-behavior: contain;
}
.ax-sheet.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.ax-sheet__head {
  display: flex; align-items: center;
  block-size: 72px;
  flex: none;
  border-block-end: 1px solid var(--ax-line);
}
.ax-sheet__body { flex: 1 1 auto; overflow-y: auto; padding-block: var(--ax-sp-9) var(--ax-sp-12); }
.ax-sheet__foot { flex: none; padding-block: var(--ax-sp-7); border-block-start: 1px solid var(--ax-line); }

.ax-sheet__group + .ax-sheet__group { margin-block-start: var(--ax-sp-10); }
.ax-sheet__label {
  display: block;
  margin-block-end: var(--ax-sp-6);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  letter-spacing: var(--ax-tr-micro);
  text-transform: uppercase;
  color: var(--ax-text-subtle);
}
.ax-sheet__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ax-sp-5);
  min-block-size: 52px;
  padding-inline-start: var(--ax-sp-7);
  font-size: var(--ax-fs-xl);
  font-weight: var(--ax-fw-semibold);
  letter-spacing: var(--ax-tr-lead);
  color: var(--ax-text);
  text-decoration: none;
  border-block-end: 1px solid var(--ax-line-soft);
}
.ax-sheet__link::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 14px;
  inline-size: 2px;
  border-radius: 2px;
  background: var(--div-stop, var(--ax-ink-400));
  transition: inset-block var(--ax-d-base) var(--ax-ease-out);
}
.ax-sheet__link:active::before { inset-block: 6px; }
.ax-sheet__link small {
  display: block;
  font-size: var(--ax-fs-xs);
  font-weight: var(--ax-fw-regular);
  letter-spacing: 0;
  color: var(--ax-text-subtle);
  margin-block-start: 2px;
}
/* staggered arrival, released by arxeon.components.js */
.ax-sheet [data-ax-sheet-item] {
  opacity: 0;
  transform: translate3d(14px, 0, 0) skewX(var(--ax-axis));
  transition: opacity var(--ax-d-slow) var(--ax-ease-out),
              transform var(--ax-d-slow) var(--ax-ease-out);
  transition-delay: var(--ax-sheet-delay, 0ms);
}
.ax-sheet.is-open [data-ax-sheet-item] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ax-sheet [data-ax-sheet-item] { opacity: 1; transform: none; transition: none; }
}


/* ── the site footer ──────────────────────────────────────────────────── */

.ax-footer--site { margin-block-start: 0; padding-block-end: 0; border-block-start: 1px solid var(--ax-line); }
.ax-footer__lead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: var(--ax-sp-11);
  align-items: start;
  padding-block-end: var(--ax-sp-12);
  border-block-end: 1px solid var(--ax-line-soft);
}
@media (max-width: 899px) { .ax-footer__lead { grid-template-columns: minmax(0, 1fr); gap: var(--ax-sp-10); } }

.ax-footer__divs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ax-sp-8) var(--ax-sp-10); }
@media (max-width: 559px) { .ax-footer__divs { grid-template-columns: minmax(0, 1fr); } }

.ax-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ax-sp-10);
  padding-block: var(--ax-sp-11);
}
@media (max-width: 899px) { .ax-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .ax-footer__cols { grid-template-columns: minmax(0, 1fr); } }

/* THE SIGNATURE — the whole ramp, once, at the very bottom of every page.
   The company's own light, laid out end to end. Nothing else on the site is
   allowed to show all nine stops at full strength. */
.ax-signature {
  block-size: 2px;
  inline-size: 100%;
  background: var(--ax-grad-sweep);
  opacity: .85;
}