/* ==========================================================================
   WENEX UI SYSTEM — COMPONENTS
   Platform-wide. Owned by the WENEX UI System, not by any single sprint.

   CONTRACT
   --------
   This file consumes tokens and declares NO visual values of its own. Every
   colour, space, radius, shadow, duration and type value is a var(--wx-*)
   from wenex-tokens.css. A literal here is a defect the linter fails on.
   Layout primitives (100%, 0, 50%, 1px hairlines, flex/grid keywords) are
   structure, not visual design, and are not tokenised.

   RTL: logical properties only. Arabic mirrors with zero additional rules.

   VENDOR DEFAULTS. Hello Elementor fills every bare <button> #CC3366 on
   hover/focus at (0,2,0) and styles inputs at (0,1,1). Component selectors
   are element-qualified (`button.wx-btn`, `input.wx-input`) so they win on
   specificity, not by force.

   THE !important BUDGET — 14 colour overrides + 2 reduced-motion.
   Page 9 still carries a legacy rule in its POST CONTENT:
       .woocommerce-account .woocommerce a { color:#C93927 !important; }
   at (0,3,1) WITH !important. Until the S2-D02 cleanup removes it no
   non-important rule of ours can win, and the deployment sequence has a
   deliberate window (plugin live at step 5, page cleaned at step 8) where
   both exist. Each one is scoped to a WENEX component class.
   REMOVAL CONDITION: once S2-D02 has landed these 14 can be dropped with no
   visual change. The 2 in the reduced-motion block are permanent — they must
   beat every transition declared above them.
   ========================================================================== */

/* ---- migrated out of page 9's post content (S2-D02) ----
   The element parts sit inside :where() so this compatibility layer has ZERO
   element specificity. Without it, `.woocommerce-account p` (0,1,1) outranked
   `.wx-state__title` (0,1,0) and repainted component headings in the body
   face — invisible in the gallery, caught only by the production integration
   run. Legacy Woo markup still inherits these; any .wx-* class always wins. */
html body.woocommerce-account{ background:var(--wx-canvas); }
.woocommerce-account :where(h1.entry-title, h2, h3){ color:var(--wx-ink); font-family:var(--wx-font-head); }
.woocommerce-account,
.woocommerce-account :where(p, label){ color:var(--wx-ink-2); font-family:var(--wx-font-body); }
.woocommerce-account table.shop_table{
  border:1px solid var(--wx-line); border-radius:var(--wx-radius-sm); background:var(--wx-surface);
}
.woocommerce-account table.shop_table th{ color:var(--wx-ink-3); border-color:var(--wx-line); }
.woocommerce-account table.shop_table td{ color:var(--wx-ink-2); border-color:var(--wx-line); }
/* Woo-rendered forms (account details, addresses) — the fields keep Woo's
   markup, so the input contract is applied by selector. Same tokens as
   input.wx-input: one visual system whichever layer rendered the field. */
body.woocommerce-account .woocommerce form .form-row input.input-text,
body.woocommerce-account .woocommerce form .form-row textarea,
body.woocommerce-account .woocommerce form .form-row select{
  background:var(--wx-input-bg); color:var(--wx-ink);
  border:1px solid var(--wx-input-border); border-radius:var(--wx-input-radius);
  min-block-size:var(--wx-input-height);
  padding-block:var(--wx-space-5); padding-inline:var(--wx-space-6);
  font-family:var(--wx-font-body); font-size:var(--wx-text-input);
}
body.woocommerce-account .woocommerce form .form-row input.input-text:focus{
  outline:none; border-color:var(--wx-accent); box-shadow:var(--wx-ring);
}
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce a.button{
  background:var(--wx-accent); color:var(--wx-ink-inverse);
  border:0; border-radius:var(--wx-btn-radius); min-block-size:var(--wx-btn-height);
  padding-inline:var(--wx-space-12);
  font-family:var(--wx-font-body); font-size:var(--wx-text-md);
  font-weight:var(--wx-weight-semibold); letter-spacing:var(--wx-tracking-wide);
  text-transform:uppercase; cursor:pointer;
}
body.woocommerce-account .woocommerce button.button:hover,
body.woocommerce-account .woocommerce a.button:hover{ background:var(--wx-accent-hover); color:var(--wx-ink-inverse); }
/* Order-table links (order number, View) — real tap targets inside legacy rows. */
.woocommerce-account table.shop_table a{
  display:inline-flex; align-items:center;
  min-block-size:var(--wx-target-min);
  color:var(--wx-accent); text-decoration:none; font-weight:var(--wx-weight-semibold);
}
.woocommerce-account table.shop_table a:hover{ text-decoration:underline; text-underline-offset:3px; }
/* Woo's own password-visibility toggle inside legacy forms: it ships ~22px
   with no accessible size. Same 44px contract as our reveal control. */
.woocommerce-account .woocommerce form .show-password-input{
  inline-size:var(--wx-target-min); block-size:var(--wx-target-min);
  display:grid; place-items:center; cursor:pointer;
  inset-block-start:50%; transform:translateY(-50%);
  inset-inline-end:var(--wx-space-1);
}

/* ---- THE 44px TARGET CONTRACT (F2) ---------------------------------------
   Applied to the account region BY CONTRACT, not page by page: every rule
   below is structural (a region + a role), so a surface added by a later
   sprint inherits the floor without anyone writing a new rule for it. The
   floor itself is `--wx-target-min` in one place — change the standard there
   and every surface follows.

   Deliberately NOT covered here: the Club Overview composition
   (.w-member / .wenex-club). It is a separate design language on its own
   scale, and its sub-44px targets are recorded as backlog for the Overview
   redesign rather than patched from this layer. The :not() below keeps this
   contract out of it, so the two systems stay independent.

   On checkboxes and radios this follows the system's own answer (.wx-check):
   the LABEL is the target, the box stays at its component size. That is what
   WCAG 2.5.8 measures — the activation area, not the painted box. */

/* 1 · Account navigation. Woo renders its own <nav>, not the WENEX Nav
      component, so the floor is applied to the legacy structure. Structural:
      every endpoint added to the account menu inherits it. */
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:flex; align-items:center;
  min-block-size:var(--wx-target-min);
}

/* 2 · Standalone action links Woo emits in the content region — address
      edit links, pagination, order actions. Matched by Woo's own class
      contract rather than by page, so every surface using them is covered
      at once. Inline links inside running prose are excluded by design:
      forcing a floor on those would break typography, and they are governed
      by spacing, not size. */
.woocommerce-account .woocommerce-MyAccount-content:not(:has(.w-member)) :where(
  a.edit,
  .woocommerce-Address-title a,
  .woocommerce-pagination a,
  .woocommerce-orders-table__cell a,
  a.woocommerce-button
){
  display:inline-flex; align-items:center;
  min-block-size:var(--wx-target-min);
}

/* 3 · Checkboxes and radios in legacy Woo forms. Woo ships the input at ~13px
      with no target at all, and woocommerce-layout.css explicitly declares
      `.woocommerce form .form-row label.checkbox{display:inline}` at (0,3,2).
      An inline box ignores min-block-size, so the target has to be won on
      specificity — element-qualified, never !important (project doctrine).
      Hence the .form-row qualifier: (0,4,2) beats the vendor default outright
      instead of relying on stylesheet order.
      The wrapping label becomes the target and the box takes the same size as
      input.wx-check__box, so legacy and component checkboxes are one visual
      system — and this is the system's own answer in .wx-check: the LABEL is
      the target, the box is the visual. That is what WCAG 2.5.8 measures. */
.woocommerce-account .woocommerce form .form-row label.checkbox,
.woocommerce-account .woocommerce form .form-row label.woocommerce-form__label-for-checkbox{
  display:flex; align-items:center; gap:var(--wx-space-3);
  min-block-size:var(--wx-target-min); cursor:pointer;
}
.woocommerce-account .woocommerce form .form-row input.input-checkbox,
.woocommerce-account .woocommerce form .form-row input[type="checkbox"],
.woocommerce-account .woocommerce form .form-row input[type="radio"]{
  inline-size:var(--wx-space-9); block-size:var(--wx-space-9);
  flex:0 0 auto; margin:0; accent-color:var(--wx-accent);
}

/* ============================ LAYOUT ============================ */
.wx-shell{
  inline-size:100%; max-inline-size:var(--wx-container); margin-inline:auto;
  padding-block:var(--wx-space-14) var(--wx-space-16);
  padding-inline:var(--wx-space-7);
}
.wx-shell.is-narrow{ max-inline-size:var(--wx-measure-form); }
.wx-grid{ display:grid; gap:var(--wx-space-6); }
@media (min-width:640px){
  .wx-grid[data-cols="2"]{ grid-template-columns:repeat(2,1fr); }
  .wx-grid[data-cols="3"]{ grid-template-columns:repeat(3,1fr); }
}

/* ============================ CARD ============================ */
.wx-card{
  background:var(--wx-card-bg);
  border:1px solid var(--wx-card-border);
  border-radius:var(--wx-card-radius);
  box-shadow:var(--wx-card-shadow);
}
.wx-card--auth{ padding:var(--wx-space-14); }
.wx-card--section{ padding:var(--wx-space-12); }
.wx-card.is-narrow{ max-inline-size:var(--wx-measure-form); margin-inline:auto; }
.wx-card__head{ margin-block-end:var(--wx-space-10); }
.wx-card--auth .wx-card__head{ text-align:center; }
.wx-card__title{
  margin:0 0 var(--wx-space-2); color:var(--wx-ink);
  font-family:var(--wx-font-head); font-weight:var(--wx-weight-bold);
  letter-spacing:var(--wx-tracking-tight); line-height:var(--wx-leading-tight);
  font-size:var(--wx-text-2xl);
}
.wx-card--section .wx-card__title{ font-size:var(--wx-text-xl); letter-spacing:var(--wx-tracking-snug); }
.wx-card__lede{
  margin:0; color:var(--wx-ink-3); font-family:var(--wx-font-body);
  font-size:var(--wx-text-base); line-height:var(--wx-leading-normal);
}
.wx-card__foot{
  margin-block-start:var(--wx-space-9); padding-block-start:var(--wx-space-8);
  border-block-start:1px solid var(--wx-line); text-align:center;
  font-family:var(--wx-font-body); font-size:var(--wx-text-md); color:var(--wx-ink-3);
}
.wx-card__actions{ margin-block-start:var(--wx-space-8); display:flex; gap:var(--wx-space-4); flex-wrap:wrap; }

/* ============================ PROVIDER ============================ */
.wx-providers{ display:flex; flex-direction:column; gap:var(--wx-space-3); }
a.wx-provider{
  display:flex; align-items:center; justify-content:center; gap:var(--wx-space-5);
  min-block-size:var(--wx-btn-height); padding-inline:var(--wx-space-8);
  background:var(--wx-surface); color:var(--wx-ink) !important;
  border:1px solid var(--wx-line-strong); border-radius:var(--wx-btn-radius);
  font-family:var(--wx-font-body); font-size:var(--wx-text-base);
  font-weight:var(--wx-weight-semibold); text-decoration:none;
  transition:border-color var(--wx-dur-fast) var(--wx-ease),
             box-shadow var(--wx-dur-fast) var(--wx-ease),
             transform var(--wx-dur-fast) var(--wx-ease);
}
a.wx-provider:hover{ border-color:var(--wx-line-hover); box-shadow:var(--wx-shadow-md); transform:translateY(-1px); }
a.wx-provider:active{ transform:translateY(0); }
a.wx-provider:focus-visible{ outline:var(--wx-focus-width) solid var(--wx-focus-color); outline-offset:var(--wx-focus-offset); }
.wx-provider svg{ inline-size:var(--wx-space-9); block-size:var(--wx-space-9); flex:0 0 auto; }

/* ============================ DIVIDER ============================ */
.wx-divider{
  display:flex; align-items:center; gap:var(--wx-space-6); margin-block:var(--wx-space-9);
  color:var(--wx-ink-4); font-family:var(--wx-font-body); font-size:var(--wx-text-xs);
  text-transform:uppercase; letter-spacing:var(--wx-tracking-wider); border:0;
}
.wx-divider::before,.wx-divider::after{ content:""; flex:1 1 auto; block-size:1px; background:var(--wx-line); }
.wx-divider--plain{ display:block; block-size:1px; background:var(--wx-line); margin-block:var(--wx-space-8); }
.wx-divider--plain::before,.wx-divider--plain::after{ content:none; }

/* ============================ INPUT ============================ */
.wx-field{ margin-block-end:var(--wx-space-7); }
.wx-input__label{
  display:block; margin-block-end:var(--wx-space-2);
  font-family:var(--wx-font-body); font-size:var(--wx-text-sm);
  font-weight:var(--wx-weight-semibold); color:var(--wx-ink);
}
.wx-req{ color:var(--wx-accent); }
input.wx-input{
  inline-size:100%; min-block-size:var(--wx-input-height);
  padding-block:var(--wx-space-5); padding-inline:var(--wx-space-6);
  background:var(--wx-input-bg); color:var(--wx-ink);
  border:1px solid var(--wx-input-border); border-radius:var(--wx-input-radius);
  font-family:var(--wx-font-body); font-size:var(--wx-text-input);
  transition:border-color var(--wx-dur-fast) var(--wx-ease),
             box-shadow var(--wx-dur-fast) var(--wx-ease);
}
input.wx-input:hover{ border-color:var(--wx-line-hover); }
input.wx-input:focus{ outline:none; border-color:var(--wx-accent); box-shadow:var(--wx-ring); }
input.wx-input[aria-invalid="true"]{ border-color:var(--wx-bad); box-shadow:var(--wx-ring-bad); }
input.wx-input:-webkit-autofill,
input.wx-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--wx-ink);
  -webkit-box-shadow:0 0 0 1000px var(--wx-surface) inset;
  box-shadow:0 0 0 1000px var(--wx-surface) inset;
}
.wx-input__help{
  display:block; margin-block-start:var(--wx-space-2);
  font-family:var(--wx-font-body); font-size:var(--wx-text-sm);
  line-height:var(--wx-leading-snug); color:var(--wx-ink-3);
}
.wx-input__msg{ display:block; font-family:var(--wx-font-body); font-size:var(--wx-text-sm); line-height:var(--wx-leading-snug); }
.wx-input__msg:not(:empty){ margin-block-start:var(--wx-space-2); }
.wx-input__msg[data-tone="bad"]{ color:var(--wx-bad); }
.wx-input__msg[data-tone="ok"]{ color:var(--wx-ok); }

.wx-input__reveal{ position:relative; display:block; }
.wx-input__reveal input.wx-input{ padding-inline-end:var(--wx-target-min); }
button.wx-reveal{
  position:absolute; inset-inline-end:var(--wx-space-1); inset-block-start:50%; transform:translateY(-50%);
  inline-size:var(--wx-target-min); block-size:var(--wx-target-min);
  display:grid; place-items:center;
  appearance:none; background:transparent; border:0; border-radius:var(--wx-radius-sm);
  color:var(--wx-ink-3); cursor:pointer;
}
button.wx-reveal:hover,button.wx-reveal:focus{ background:transparent; color:var(--wx-ink); }
button.wx-reveal:focus-visible{ outline:var(--wx-focus-width) solid var(--wx-focus-color); outline-offset:1px; }
.wx-reveal svg{ inline-size:var(--wx-space-9); block-size:var(--wx-space-9); }

/* ============================ STRENGTH ============================ */
.wx-strength{ margin-block:calc(var(--wx-space-3) * -1) var(--wx-space-6); }
.wx-strength[hidden]{ display:none; }
.wx-strength__track{ block-size:var(--wx-space-1); border-radius:2px; background:var(--wx-a-09); overflow:hidden; }
.wx-strength__bar{
  display:block; block-size:100%; inline-size:0%; border-radius:2px; background:var(--wx-bad);
  transition:inline-size var(--wx-dur-med) var(--wx-ease), background-color var(--wx-dur-med) var(--wx-ease);
}
.wx-strength[data-level="1"] .wx-strength__bar{ inline-size:25%;  background:var(--wx-bad); }
.wx-strength[data-level="2"] .wx-strength__bar{ inline-size:50%;  background:var(--wx-warn); }
.wx-strength[data-level="3"] .wx-strength__bar{ inline-size:75%;  background:var(--wx-ok); }
.wx-strength[data-level="4"] .wx-strength__bar{ inline-size:100%; background:var(--wx-ok); }
.wx-strength__label{
  margin:var(--wx-space-2) 0 0; font-family:var(--wx-font-body);
  font-size:var(--wx-text-sm); color:var(--wx-ink-3);
}

/* ============================ RULES ============================ */
.wx-rules{ list-style:none; margin:0 0 var(--wx-space-7); padding:0; display:flex; flex-direction:column; gap:var(--wx-space-2); }
.wx-rules__item{
  display:flex; align-items:center; gap:var(--wx-space-3);
  font-family:var(--wx-font-body); font-size:var(--wx-text-sm); color:var(--wx-ink-3);
  transition:color var(--wx-dur-fast) var(--wx-ease);
}
.wx-rules__mark{
  inline-size:var(--wx-space-7); block-size:var(--wx-space-7); flex:0 0 auto;
  display:grid; place-items:center; border-radius:var(--wx-radius-circle);
  border:1px solid var(--wx-line-strong); color:transparent;
  transition:background-color var(--wx-dur-fast) var(--wx-ease),
             border-color var(--wx-dur-fast) var(--wx-ease),
             color var(--wx-dur-fast) var(--wx-ease);
}
.wx-rules__icon{ inline-size:var(--wx-space-4); block-size:var(--wx-space-4); }
.wx-rules__item[data-met="true"]{ color:var(--wx-ok); }
.wx-rules__item[data-met="true"] .wx-rules__mark{
  background:var(--wx-ok); border-color:var(--wx-ok); color:var(--wx-ink-inverse);
  animation:wx-pop var(--wx-dur-med) var(--wx-ease);
}
@keyframes wx-pop{ 0%{ transform:scale(.7); } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); } }

/* ============================ CHECK / ROW / LINK ============================ */
.wx-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--wx-space-5); flex-wrap:wrap; margin-block-end:var(--wx-space-8); }
.wx-check{
  display:flex; align-items:center; gap:var(--wx-space-3); min-block-size:var(--wx-target-min); cursor:pointer;
  font-family:var(--wx-font-body); font-size:var(--wx-text-md); color:var(--wx-ink-2);
}
.wx-check--consent{ align-items:flex-start; padding-block:var(--wx-space-1); margin-block-end:var(--wx-space-7); }
.wx-check--consent .wx-check__box{ margin-block-start:var(--wx-space-5); }
input.wx-check__box{ inline-size:var(--wx-space-9); block-size:var(--wx-space-9); flex:0 0 auto; margin:0; accent-color:var(--wx-accent); }
.wx-check a{ color:var(--wx-accent); }
a.wx-link-quiet{
  font-family:var(--wx-font-body); font-size:var(--wx-text-md); color:var(--wx-ink-3) !important;
  text-decoration:none; min-block-size:var(--wx-target-min); display:inline-flex; align-items:center;
}
a.wx-link-quiet:hover{ color:var(--wx-ink) !important; text-decoration:underline; text-underline-offset:3px; }
a.wx-link-quiet:focus-visible{ outline:var(--wx-focus-width) solid var(--wx-focus-color); outline-offset:var(--wx-focus-offset); }
button.wx-link{
  appearance:none; background:transparent; border:0; padding:0; cursor:pointer;
  font-family:var(--wx-font-body); font-size:inherit; font-weight:var(--wx-weight-semibold);
  color:var(--wx-accent); text-decoration:underline; text-underline-offset:3px;
  min-block-size:var(--wx-target-min);
}
button.wx-link:hover,button.wx-link:focus{ background:transparent; color:var(--wx-accent-hover); }
button.wx-link:focus-visible{ outline:var(--wx-focus-width) solid var(--wx-focus-color); outline-offset:var(--wx-focus-offset); border-radius:var(--wx-radius-xs); }

/* ============================ BUTTON ============================ */
.wx-btn{
  inline-size:100%; min-block-size:var(--wx-btn-height);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--wx-space-3);
  border:1px solid transparent; border-radius:var(--wx-btn-radius); cursor:pointer;
  font-family:var(--wx-font-body); font-size:var(--wx-text-md); font-weight:var(--wx-weight-semibold);
  letter-spacing:var(--wx-tracking-wide); text-transform:uppercase; text-decoration:none;
  transition:background-color var(--wx-dur-fast) var(--wx-ease),
             border-color var(--wx-dur-fast) var(--wx-ease),
             transform var(--wx-dur-fast) var(--wx-ease);
}
button.wx-btn--primary,a.wx-btn--primary{ background:var(--wx-accent); color:var(--wx-ink-inverse) !important; }
button.wx-btn--primary:hover,a.wx-btn--primary:hover{ background:var(--wx-accent-hover); color:var(--wx-ink-inverse) !important; }
button.wx-btn--secondary,a.wx-btn--secondary{ background:transparent; color:var(--wx-ink) !important; border-color:var(--wx-line-strong); }
button.wx-btn--secondary:hover,a.wx-btn--secondary:hover{ background:transparent; border-color:var(--wx-ink-3); }
button.wx-btn--quiet,a.wx-btn--quiet{ background:transparent; color:var(--wx-ink-3) !important; inline-size:auto; text-transform:none; letter-spacing:0; }
button.wx-btn--quiet:hover,a.wx-btn--quiet:hover{ background:transparent; color:var(--wx-ink) !important; }
button.wx-btn--danger{ background:var(--wx-bad); color:var(--wx-ink-inverse) !important; }
button.wx-btn--danger:hover{ background:var(--wx-bad-hover); color:var(--wx-ink-inverse) !important; }
.wx-btn:active{ transform:scale(.99); }
.wx-btn:focus-visible{ outline:var(--wx-focus-width) solid var(--wx-focus-color); outline-offset:3px; }
.wx-btn[aria-disabled="true"]{ background:var(--wx-disabled); color:var(--wx-ink-inverse) !important; cursor:progress; transform:none; }
.wx-btn__icon{ inline-size:var(--wx-text-lg); block-size:var(--wx-text-lg); }
.wx-btn__spinner{
  inline-size:var(--wx-space-7); block-size:var(--wx-space-7); display:none; flex:0 0 auto;
  border:2px solid rgba(255,255,255,.4); border-block-start-color:var(--wx-ink-inverse);
  border-radius:var(--wx-radius-circle); animation:wx-spin var(--wx-spin) linear infinite;
}
.wx-btn.is-busy .wx-btn__spinner{ display:block; }
.wx-btn.is-busy .wx-btn__label{ opacity:.85; }
@keyframes wx-spin{ to{ transform:rotate(360deg); } }

/* ============================ ALERT ============================ */
.wx-alert{
  display:flex; gap:var(--wx-space-5); align-items:flex-start;
  padding:var(--wx-space-5) var(--wx-space-7); margin-block-end:var(--wx-space-7);
  border:1px solid transparent; border-radius:var(--wx-radius-md);
  font-family:var(--wx-font-body); font-size:var(--wx-text-md); line-height:var(--wx-leading-normal);
  animation:wx-rise var(--wx-dur-med) var(--wx-ease);
}
.wx-alert__icon{ inline-size:var(--wx-space-8); block-size:var(--wx-space-8); flex:0 0 auto; margin-block-start:1px; }
.wx-alert__title{ margin:0 0 2px; font-weight:var(--wx-weight-semibold); }
.wx-alert__text{ margin:0; }
.wx-alert--success{ background:var(--wx-ok-wash); border-color:var(--wx-ok-line); color:var(--wx-ok-ink); }
.wx-alert--error{ background:var(--wx-bad-wash); border-color:var(--wx-bad-line); color:var(--wx-bad-ink); }
.wx-alert--info{ background:var(--wx-info-wash); border-color:var(--wx-info-line); color:var(--wx-info-ink); }
@keyframes wx-rise{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* ============================ STATES ============================ */
.wx-state{ text-align:center; padding:var(--wx-space-14) var(--wx-space-9); }
.wx-state__icon{
  inline-size:52px; block-size:52px; margin-inline:auto; margin-block-end:var(--wx-space-6);
  display:grid; place-items:center; border-radius:var(--wx-radius-circle);
  background:var(--wx-surface-sunken); color:var(--wx-ink-4);
}
.wx-state--success .wx-state__icon{ background:var(--wx-ok-wash); color:var(--wx-ok); }
.wx-state--error .wx-state__icon{ background:var(--wx-bad-wash); color:var(--wx-bad); }
.wx-state__glyph{ inline-size:var(--wx-space-10); block-size:var(--wx-space-10); }
/* Deployment-window survival: until the S2-D02 cleanup, page 9's inline
   wx-account-layer prints `.woocommerce-account p{font-family:Satoshi}`
   (0,1,1) in the BODY — after every stylesheet. (0,2,0) outranks it. */
.wx-state .wx-state__title{ font-family:var(--wx-font-head); }
.wx-state__title{
  margin:0 0 var(--wx-space-2); font-family:var(--wx-font-head);
  font-size:var(--wx-text-lg); font-weight:var(--wx-weight-semibold); color:var(--wx-ink);
}
.wx-state__body{
  margin:0 auto; max-inline-size:var(--wx-measure-prose);
  font-family:var(--wx-font-body); font-size:var(--wx-text-md);
  line-height:var(--wx-leading-relaxed); color:var(--wx-ink-3);
}
.wx-state__actions{ margin-block-start:var(--wx-space-8); display:flex; gap:var(--wx-space-4); justify-content:center; flex-wrap:wrap; }
.wx-state__actions .wx-btn{ inline-size:auto; padding-inline:var(--wx-space-10); }

/* ============================ NAV ============================ */
.wx-nav__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.wx-nav__link{
  display:flex; align-items:center; gap:var(--wx-space-5);
  min-block-size:46px; padding-inline:var(--wx-space-5); border-radius:var(--wx-nav-radius);
  font-family:var(--wx-font-body); font-size:var(--wx-text-md); font-weight:var(--wx-weight-medium);
  color:var(--wx-ink-3) !important; text-decoration:none;
  transition:background-color var(--wx-dur-fast) var(--wx-ease), color var(--wx-dur-fast) var(--wx-ease);
}
.wx-nav__link:hover{ background:var(--wx-surface-sunken); color:var(--wx-ink) !important; }
.wx-nav__item.is-current .wx-nav__link{ background:var(--wx-accent-wash); color:var(--wx-accent) !important; font-weight:var(--wx-weight-semibold); }
.wx-nav__link:focus-visible{ outline:var(--wx-focus-width) solid var(--wx-focus-color); outline-offset:-2px; }
.wx-nav__icon{ inline-size:var(--wx-space-8); block-size:var(--wx-space-8); flex:0 0 auto; }
.wx-nav__text{ flex:1 1 auto; }
.wx-nav__badge{
  min-inline-size:var(--wx-space-9); padding-inline:var(--wx-space-2); border-radius:var(--wx-radius-pill);
  background:var(--wx-accent); color:var(--wx-ink-inverse);
  font-size:var(--wx-text-2xs); font-weight:var(--wx-weight-bold); line-height:var(--wx-space-9); text-align:center;
}

/* ============================ TILE ============================ */
.wx-tiles{ display:grid; gap:var(--wx-space-5); }
@media (min-width:620px){ .wx-tiles{ grid-template-columns:repeat(2,1fr); } }
.wx-tile{
  display:flex; align-items:flex-start; gap:var(--wx-space-5);
  padding:var(--wx-space-7); text-decoration:none;
  background:var(--wx-surface); border:1px solid var(--wx-line); border-radius:var(--wx-tile-radius);
  transition:border-color var(--wx-dur-fast) var(--wx-ease),
             box-shadow var(--wx-dur-fast) var(--wx-ease),
             transform var(--wx-dur-fast) var(--wx-ease);
}
a.wx-tile:hover{ border-color:var(--wx-line-hover); box-shadow:var(--wx-shadow-lg); transform:translateY(-2px); }
a.wx-tile:focus-visible{ outline:var(--wx-focus-width) solid var(--wx-focus-color); outline-offset:var(--wx-focus-offset); }
.wx-tile__icon{
  inline-size:36px; block-size:36px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:var(--wx-radius-sm); background:var(--wx-accent-wash); color:var(--wx-accent);
}
.wx-tile__glyph{ inline-size:var(--wx-space-8); block-size:var(--wx-space-8); }
.wx-tile__text{ flex:1 1 auto; min-inline-size:0; }
.wx-tile__title{ display:block; font-family:var(--wx-font-head); font-size:var(--wx-text-base); font-weight:var(--wx-weight-semibold); color:var(--wx-ink); }
.wx-tile__body{ display:block; margin-block-start:3px; font-family:var(--wx-font-body); font-size:var(--wx-text-sm); line-height:var(--wx-leading-snug); color:var(--wx-ink-3); }
.wx-tile__meta{ font-family:var(--wx-font-body); font-size:var(--wx-text-xs); color:var(--wx-ink-4); }
.wx-tile__arrow{ align-self:center; color:var(--wx-ink-4); flex:0 0 auto; transition:transform var(--wx-dur-fast) var(--wx-ease); }
.wx-tile__arrow svg{ inline-size:var(--wx-text-lg); block-size:var(--wx-text-lg); }
a.wx-tile:hover .wx-tile__arrow{ transform:translateX(2px); }
.wx-tile.is-done .wx-tile__icon{ background:var(--wx-ok-wash); color:var(--wx-ok); }
.wx-tile.is-done .wx-tile__title{ color:var(--wx-ink-3); }

/* Window survival: page 9's inline `.woocommerce-account .woocommerce a`
   (0,2,1) underlines and repaints every anchor until the S2-D02 cleanup.
   Tiles and nav links are components, not prose links — (0,3,1) outranks it
   whatever the source order. Droppable with the same removal condition as
   the !important budget. */
.wx-tiles a.wx-tile,
.wx-tiles a.wx-tile .wx-tile__title,
.wx-tiles a.wx-tile .wx-tile__body,
.wx-tiles a.wx-tile .wx-tile__meta{ text-decoration:none; }
.wx-nav .wx-nav__list a.wx-nav__link{ text-decoration:none; }

/* ============================ SKELETON ============================ */
.wx-skeleton{ display:flex; flex-direction:column; gap:var(--wx-space-3); }
.wx-skeleton__bar{
  display:block; block-size:var(--wx-space-5); border-radius:var(--wx-space-2);
  background:linear-gradient(90deg,var(--wx-a-06) 25%,var(--wx-a-10) 37%,var(--wx-a-06) 63%);
  background-size:400% 100%;
  animation:wx-shimmer var(--wx-shimmer) ease-in-out infinite;
}
.wx-skeleton__bar:last-child{ inline-size:62%; }
.wx-skeleton--tile .wx-skeleton__bar{ block-size:60px; border-radius:var(--wx-radius-md); }
.wx-skeleton--tile .wx-skeleton__bar:last-child{ inline-size:100%; }
@keyframes wx-shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* ============================ DIALOG ============================ */
.wx-dialog[hidden]{ display:none; }
.wx-dialog{ position:fixed; inset:0; z-index:var(--wx-z-dialog); display:grid; place-items:center; padding:var(--wx-space-8); }
.wx-dialog__scrim{ position:absolute; inset:0; background:var(--wx-scrim); animation:wx-fade var(--wx-dur-fast) ease; }
.wx-dialog__panel{
  position:relative; inline-size:100%; max-inline-size:400px;
  background:var(--wx-surface); border-radius:var(--wx-dialog-radius); padding:var(--wx-space-10);
  box-shadow:var(--wx-shadow-modal); animation:wx-zoom var(--wx-dur-med) var(--wx-ease);
}
.wx-dialog__title{ margin:0 0 var(--wx-space-3); font-family:var(--wx-font-head); font-size:var(--wx-text-lg); font-weight:var(--wx-weight-bold); color:var(--wx-ink); }
.wx-dialog__body{ margin:0 0 var(--wx-space-9); font-family:var(--wx-font-body); font-size:var(--wx-text-md); line-height:var(--wx-leading-relaxed); color:var(--wx-ink-3); }
.wx-dialog__actions{ display:flex; gap:var(--wx-space-4); justify-content:flex-end; }
.wx-dialog__actions .wx-btn{ inline-size:auto; padding-inline:var(--wx-space-9); }
@keyframes wx-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes wx-zoom{ from{ opacity:0; transform:scale(.96) translateY(6px); } to{ opacity:1; transform:none; } }

/* ============================ AUTH FLOW ============================ */
.wx-flow__views{ position:relative; }
.wx-flow[data-enhanced] .wx-form[hidden],
.wx-flow[data-enhanced] .wx-flow__step[hidden]{ display:none; }
.wx-flow[data-enhanced] .wx-flow__step{ animation:wx-step var(--wx-dur-med) var(--wx-ease); }
@keyframes wx-step{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.wx-identity{
  display:flex; align-items:center; justify-content:space-between; gap:var(--wx-space-4);
  padding:var(--wx-space-5) var(--wx-space-6); margin-block-end:var(--wx-space-7);
  background:var(--wx-surface-sunken); border-radius:var(--wx-radius-md);
  font-family:var(--wx-font-body); font-size:var(--wx-text-md); color:var(--wx-ink-2);
}
.wx-identity__mail{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wx-switch{ margin:0; }

/* ============================ EMPTY-STATE WIRING ============================ */
/* When Wenex_Account renders an owned empty state on the orders/downloads
   hooks, Woo still prints its own bare info notice immediately after. This
   retires exactly that duplicate — scoped to the sibling position so a real
   notice elsewhere on the page is never hidden. */
.wx-owns-empty + .woocommerce-message,
.wx-owns-empty + .woocommerce-info,
.wx-owns-empty ~ .woocommerce-message--info{ display:none; }

/* ============================ MOTION ============================ */
/* Transition durations are already zeroed at the token layer. These stop the
   KEYFRAME animations, which do not read a duration token.
   Scoped to the components themselves rather than to `.wx-shell *`: a
   skeleton or a spinner rendered outside a shell — which Sprints 3–6 will do —
   must honour reduced motion too. The earlier shell-scoped rule silently did
   not, which the visual-regression run exposed as non-determinism. */
@media (prefers-reduced-motion:reduce){
  .wx-skeleton__bar,
  .wx-btn__spinner,
  .wx-alert,
  .wx-dialog__panel,
  .wx-dialog__scrim,
  .wx-rules__item[data-met="true"] .wx-rules__mark,
  .wx-flow[data-enhanced] .wx-flow__step{ animation:none !important; }
  .wx-shell *,
  .wx-dialog *{ transition:none !important; }
}

/* ============================ SMALL SCREENS ============================ */
@media (max-width:480px){
  .wx-card--auth{ padding:var(--wx-space-8); border-radius:var(--wx-radius-md); }
  .wx-row{ flex-direction:column; align-items:flex-start; gap:var(--wx-space-1); }
  .wx-state{ padding-block:var(--wx-space-12); }
}

/* ==========================================================================
   SPRINT 3 · VISUAL POLISH — account-surface corrections
   ========================================================================== */

/* ---- CURRENCY BIDI (S-033 / D-003) --------------------------------------
   The AED mark "د.إ" is an RTL run inside an LTR context; without isolation
   the bidi algorithm mangles it into "3,000.00!.د" — on the most
   trust-sensitive string in the product. Isolating both spans renders the
   symbol and amount in source order on every canvas and in every locale. */
.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol{ unicode-bidi:isolate; }

/* ---- LEGACY FIELDSET → SECTION CARD (S-032) ------------------------------
   Woo's account-details "Password change" block is a bare <fieldset> whose
   legend breaks the border line — a browser default from another era, and
   the only place it appears in the product. Restyled to the same section
   language as every other card; markup untouched, so a WooCommerce update
   cannot break it. */
body.woocommerce-account .woocommerce form fieldset{
  margin-block:var(--wx-space-10) var(--wx-space-8);
  padding:var(--wx-space-9);
  background:var(--wx-surface-sunken);
  border:1px solid var(--wx-line);
  border-radius:var(--wx-radius-md);
}
body.woocommerce-account .woocommerce form fieldset legend{
  padding-inline:var(--wx-space-2);
  font-family:var(--wx-font-head);
  font-size:var(--wx-text-lg);
  font-weight:var(--wx-weight-semibold);
  color:var(--wx-ink);
}

/* ---- HELPER TEXT (S-035) --------------------------------------------------
   Woo emphasises helper copy with <em>/<small> italics; italic at small sizes
   is the least legible option on a dark canvas. Roman, one step of contrast up. */
body.woocommerce-account .woocommerce form .form-row em,
body.woocommerce-account .woocommerce form .form-row small{
  font-style:normal;
  color:var(--wx-ink-3);
}

/* ---- AUTH CARD COMPOSITION (V-013 / V-014 / V-022) ------------------------
   WooCommerce draws its own box around form.login/.register — a lavender
   #CFC8D8 border at a 5px radius, neither colour nor radius from the WENEX
   palette, producing a card inside a card. The WENEX card owns the surface;
   the inner box conveys nothing. Removed rather than restyled. */
body.woocommerce-account .woocommerce form.login,
body.woocommerce-account .woocommerce form.register,
body.woocommerce-account .woocommerce form.lost_reset_password{
  border:0; padding:0; background:transparent; box-shadow:none; border-radius:0;
}
/* (V-013) Two alignment axes: the theme's full-width page title sat on the
   content grid while the auth card centred on the viewport. On logged-out
   account pages the title joins the card's axis. */
body.woocommerce-account:not(.logged-in) .entry-title{ text-align:center; }
/* (V-022) The account switch is a secondary action: medium weight, underline
   only on approach — heavy underlined 600 crimson competed with the primary. */
button.wx-link{ font-weight:var(--wx-weight-medium); text-decoration:none; }
button.wx-link:hover, button.wx-link:focus-visible{ text-decoration:underline; text-underline-offset:3px; }