/*
 * nox-customer.css: customer-area components on top of KTUI + nox-ui.css (the Polished Pro finish) + nox-panel.css (the shared kit).
 * Production subset of the customer prototype's designs/customer-panel/_shared/customer.css, unchanged except that the prototype-only
 * rules (scenario banner, page-map scenario list, demo-note print rule) are dropped. Live examples: designs/customer-panel/_components/.
 * Only KTUI tokens, the finish's --nx-* tokens and the store accent (--nx-store-from / --nx-store-to, injected per store in <head>),
 * so light and dark come for free. The customer shell agent may extend this file; pages use public/css/pages/customer/<page>.css.
 *
 *  1 tokens + store mark                    8 payment instructions (copyable methods)
 *  2 shell: rail, header/app bar, tab bar,  9 upload drop zone
 *    footer, account                        10 order status timeline
 *  3 account summary strip                  11 invoice sheet (A4 preview, receipt watermark, print)
 *  4 subscription card, meter, ended rows   12 how-it-works steps, welcome, spinner, misc
 *  4b tool logo, tool boxes, compact list   13 auth / error / store page touches
 *  5 servers (groups, one server), guide
 *  6 plan picker                            14 page patterns every screen shares: card heading, filter bar,
 *  7 cart summary + sticky cart bar            full-card empty states, alert actions, rich-text links, phone-only hiding
 */

/* ============ 1. tokens + store mark ============ */
/* :where() keeps these defaults at zero specificity, so the per-store accent injected in <head> by the customer layouts always wins */
:where(:root) {
  --nx-rail-w: 5.75rem;
  --nx-header-h: 4rem;
  --nx-tabbar-h: 4.25rem;
  --nx-store-from: #6366f1;
  --nx-store-to: #a855f7;
  --nx-store-ink: #fff;
}
:root {
  --nx-store-tint: color-mix(in oklab, var(--nx-store-from) 55%, var(--nx-store-to));
  /* the gradient behind white initials starts 6% darker, so the small "AL" clears 4.5:1 (was 4.47:1 on #6366f1; review c3) */
  --nx-store-grad: linear-gradient(135deg, color-mix(in oklab, var(--nx-store-from) 94%, black), var(--nx-store-to));
}
/* clearer lines (owner, Oct 2026: "the lines of each container and box are not clearly visible"). Tried here first, now shared by all
   three panels: the tokens, --border / --input and the kit's own pieces live in nox-ui.css "Lines" (end of section 3). Three 1 px weights
   (1.5 px blurred at 1x):
     --nx-line          #d8d8de / dark #31313a, = --border: dividers inside a container (card header / footer rules, list and table rows,
                        the summary strip's cells)
     --nx-line-strong   #cbcbd2 / dark #40404a: outlines (cards, tool boxes, tiles, plan / payment / file boxes, outline buttons, modals,
                        dropdown menus, toasts, summary boxes, the rail, header and tab bar)
     --nx-line-input    #c0c0c8 / dark #4e4e59, = --input: form controls (inputs, selects, the search box), a step above the outlines
   Only the customer area's own boxes are listed here. */
.nx-plan, .nx-pay-method, .nx-howto li, .nx-drop-file, .nx-file, .nx-cartbar, .nx-invoice,
.nx-sub-note { border-color: var(--nx-line-strong); }

/* in-page anchors and scrollIntoView stop below the sticky header / phone app bar (review c3 request 4) */
html { scroll-padding-top: calc(var(--nx-header-h) + 1rem); }
@media (max-width: 63.98rem) { html { scroll-padding-top: 4.5rem; } }
/* the store's mark (live: a 2-letter initials tile; H3): the storefront's gradient, the only place the store accent appears */
.nx-store-mark {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 10px;
  background: var(--nx-store-grad); color: var(--nx-store-ink);
  font: 700 .875rem/1 var(--font-sans); letter-spacing: -.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(9, 9, 11, .18);
}
.nx-store-mark-sm { width: 2rem; height: 2rem; border-radius: 8px; font-size: .75rem; }
.nx-store-mark-lg { width: 3.5rem; height: 3.5rem; border-radius: 14px; font-size: 1.125rem; }

/* Store branding (task: Store branding): the merchant's uploaded logo laid over the monogram (nx.store-brand). The wrapper takes
   the mark's own box; the logo overlays it and is shown only while .has-logo. A logo that fails to load removes itself and takes
   .has-logo off (onerror), so the monogram shows again — never a broken image (the same fallback as nx.tool-tile). */
.nx-store-brand { position: relative; display: inline-grid; flex: 0 0 auto; }
.nx-store-brand > .nx-store-mark { grid-area: 1 / 1; }
.nx-store-brand > .nx-store-logo { grid-area: 1 / 1; display: none; width: 100%; height: 100%; object-fit: contain; }
.nx-store-brand.has-logo > .nx-store-mark { visibility: hidden; }
.nx-store-brand.has-logo > .nx-store-logo { display: block; }

/* ============ 2. shell ============ */
.nx-cx { min-height: 100%; }
.nx-cx-wrap { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
/* KTUI gives .kt-container-fixed flex-grow: 1; as a flex item of the shell (a full-width banner's box) it swallowed the spare
   height of short pages and pushed the content down (review c2 request R3; was patched in three page.css files) */
.nx-cx-wrap > .kt-container-fixed { flex-grow: 0; }
.nx-cx-main { flex: 1 0 auto; min-width: 0; padding-top: 1.25rem; }
.nx-cx-avatar { background: color-mix(in oklab, var(--nx-store-tint) 12%, var(--card)); color: color-mix(in oklab, var(--nx-store-tint) 70%, black);
  border-color: color-mix(in oklab, var(--nx-store-tint) 26%, transparent); }
.dark .nx-cx-avatar { color: color-mix(in oklab, var(--nx-store-tint) 45%, white); background: color-mix(in oklab, var(--nx-store-tint) 20%, var(--card)); }

/* rail (desktop): icon + label tiles, the live structure in the Polished Pro finish */
.nx-rail { display: none; }
@media (min-width: 64rem) {
  .nx-rail {
    position: fixed; z-index: 30; inset-block: 0; inset-inline-start: 0; width: var(--nx-rail-w);
    display: flex; flex-direction: column; align-items: stretch; background: var(--background); border-inline-end: 1px solid var(--nx-line-strong);
  }
  .nx-cx-wrap { margin-inline-start: var(--nx-rail-w); }
}
.nx-rail-brand { display: grid; place-items: center; height: var(--nx-header-h); flex-shrink: 0; border-bottom: 1px solid var(--nx-line-strong); }
.nx-rail-brand:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: -4px; border-radius: 10px; }
.nx-rail-nav { display: flex; flex-direction: column; gap: .375rem; padding: .875rem .5rem; overflow-y: auto; scrollbar-width: none; }
.nx-rail-link {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: .625rem .125rem .5rem;
  border: 1px solid transparent; border-radius: 10px; color: var(--secondary-foreground);
  font-size: .6875rem; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; text-align: center;
  transition: background-color .12s, border-color .12s, color .12s;
}
.nx-rail-link i { font-size: 1.375rem; line-height: 1; color: var(--muted-foreground); transition: color .12s; }
.nx-rail-link:hover { background: var(--muted); color: var(--mono); }
.nx-rail-link:hover i { color: var(--foreground); }
.nx-rail-link.is-active { background: var(--card); border-color: var(--nx-line-strong); box-shadow: var(--nx-shadow); color: var(--mono); font-weight: 600; }
.nx-rail-link.is-active i { color: var(--primary); }
.dark .nx-rail-link.is-active i { color: var(--nx-link); }
.nx-rail-link.is-active::before { content: ""; position: absolute; inset-inline-start: -.5625rem; top: .75rem; bottom: .75rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.nx-rail-link:focus-visible, .nx-tabbar-link:focus-visible, .nx-rail-btn:focus-visible, .nx-rail-account:focus-visible, .nx-cx-store:focus-visible,
.nx-cx-footer a:focus-visible, .nx-sub a:focus-visible, .nx-cx-summary a:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 2px;
}
.nx-nav-count {
  position: absolute; top: .3125rem; inset-inline-end: .75rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem;
  display: inline-grid; place-items: center; border-radius: 999px; font: 500 .6875rem/1 var(--nx-mono);
  background: color-mix(in oklab, #f59e0b 18%, var(--card)); color: #854d0e; box-shadow: 0 0 0 2px var(--background);
}
.dark .nx-nav-count { color: #fbbf24; }
.nx-rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: .625rem; padding: .875rem .5rem 1rem; border-top: 1px solid var(--nx-line-strong); }
.nx-rail-btn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; border: 0; background: transparent; color: var(--secondary-foreground); cursor: pointer; }
.nx-rail-btn i { font-size: 1.25rem; }
.nx-rail-btn:hover { background: var(--muted); color: var(--mono); }
.nx-rail-account { display: inline-grid; place-items: center; padding: 2px; border-radius: 12px; border: 1px solid transparent; background: transparent; cursor: pointer; }
.nx-rail-account:hover, [data-kt-dropdown-initialized].open > .nx-rail-account { border-color: var(--nx-line-strong); background: var(--muted); }
.nx-rail-account .nx-avatar { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; border-radius: 10px; font-size: .8125rem; }

/* header: store identity on the left (H3); on phones the app bar (M3) */
.nx-cx-header {
  position: sticky; top: 0; z-index: 20; height: var(--nx-header-h); flex-shrink: 0; border-bottom: 1px solid var(--nx-line-strong);
  background: color-mix(in oklab, var(--background) 84%, transparent); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.nx-cx-header-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-grow: 0; }
.nx-cx-store { display: flex; align-items: center; gap: .625rem; min-width: 0; border-radius: 8px; }
.nx-cx-store-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.nx-cx-store-text b { font-size: .9375rem; font-weight: 600; color: var(--mono); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-cx-store-text small { font-size: .75rem; color: var(--secondary-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-cx-header-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.nx-cx-header .kt-btn-icon i { font-size: 1.25rem; }
.nx-cx-header .kt-btn-icon { color: var(--secondary-foreground); }
.nx-cx-back { height: 2.25rem; }
@media (min-width: 64rem) {
  .nx-cx-store-mark, .nx-cx-appbar-account { display: none !important; }
}
@media (max-width: 63.98rem) {
  .nx-cx-search { display: none; }
  .nx-cx-header { height: 3.5rem; }
}
@media (max-width: 47.98rem) {
  .nx-cx-back { width: 2.25rem; padding: 0; justify-content: center; }
  .nx-cx-back span, .nx-cx-store-domain { display: none; }
}
/* the store's currency switcher (themes::_shared.currency, the .nx-cur look in nox-ui.css; task 780): in the header and on the sign-in
   pages' top bar; on phones the symbols alone ("₹ | $": the store's name keeps its room), the codes stay for screen readers */
@media (max-width: 47.98rem) {
  .nx-cx-cur .th-cur-face { min-width: 2.125rem; padding-inline: .4rem; }
  .nx-cx-cur .th-cur-sym { font-size: .9375rem; }
  .nx-cx-cur .th-cur-sym + .th-cur-code { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* narrow phones with the switcher: the "Back to store" icon steps aside (the account menu next to it has Back to store), so the
   store's name is not cut to "San…" */
@media (max-width: 23.75rem) {
  .nx-cx-header-actions:has(.nx-cx-cur):has(.nx-cx-appbar-account) .nx-cx-back { display: none; }
}


/* footer */
.nx-cx-footer { flex-shrink: 0; margin-top: 1rem; border-top: 1px solid var(--nx-line-strong); }
.nx-cx-footer-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.25rem; padding-block: 1rem; font-size: .8125rem; color: var(--muted-foreground); }
.nx-cx-footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.125rem; }
.nx-cx-footer-links a { color: var(--secondary-foreground); }
.nx-cx-footer-links a:hover { color: var(--primary); }
.dark .nx-cx-footer-links a:hover { color: var(--nx-link); }
/* the store's legal pages (customer::layout.legal-links, task 540): in the signed-in footer and under the sign-in pages */
.nx-cx-footer-navs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.125rem; }
.nx-cx-footer-navs .nx-cx-legal { padding-inline-start: 1.125rem; border-inline-start: 1px solid var(--border); }
@media (max-width: 39.98rem) { .nx-cx-footer-navs .nx-cx-legal { padding-inline-start: 0; border-inline-start: 0; } }
.nx-cx-legal { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.125rem; }
.nx-cx-legal a { color: var(--secondary-foreground); }
.nx-cx-legal a:hover { color: var(--primary); }
.dark .nx-cx-legal a:hover { color: var(--nx-link); }
.nx-auth-foot-legal { justify-content: center; margin-top: .375rem; }
.nx-auth-foot-legal a { display: inline-flex; align-items: center; min-height: 2rem; }
.nx-auth-legal { margin-top: .25rem; font-size: .8125rem; line-height: 1.5; text-align: center; color: var(--secondary-foreground); text-wrap: pretty; }

/* bottom tab bar (phones; M3) */
.nx-tabbar { display: none; }
@media (max-width: 63.98rem) {
  .nx-tabbar {
    position: fixed; z-index: 40; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--nx-tabbar-h) + env(safe-area-inset-bottom)); padding: .3125rem .25rem env(safe-area-inset-bottom);
    background: color-mix(in oklab, var(--card) 92%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--nx-line-strong); box-shadow: 0 -8px 24px -18px rgba(9, 9, 11, .35);
  }
  .nx-cx-wrap { padding-bottom: calc(var(--nx-tabbar-h) + env(safe-area-inset-bottom)); }
  .nx-cx .nx-toasts { bottom: calc(var(--nx-tabbar-h) + env(safe-area-inset-bottom) + .75rem); right: .75rem; width: min(380px, calc(100vw - 1.5rem)); }
}
.nx-tabbar-link {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-width: 0;
  border-radius: 10px; color: var(--secondary-foreground); font-size: .6875rem; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; text-align: center;
}
.nx-tabbar-link span:not(.nx-nav-count) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-tabbar-link i { font-size: 1.375rem; line-height: 1; color: var(--muted-foreground); }
.nx-tabbar-link.is-active { color: var(--mono); font-weight: 600; }
.nx-tabbar-link.is-active i { color: var(--primary); }
.dark .nx-tabbar-link.is-active i { color: var(--nx-link); }
.nx-tabbar-link.is-active::before { content: ""; position: absolute; top: -.3125rem; inset-inline: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); }
.nx-tabbar-link .nx-nav-count { top: .125rem; inset-inline-end: calc(50% - 1.5rem); }

/* ============ 3. account summary strip (the area's dashboard) ============ */
.nx-cx-summary { display: grid; grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
.nx-cx-cell { display: flex; flex-direction: column; gap: .375rem; padding: .875rem 1.125rem; min-width: 0; border-top: 1px solid var(--border); }
.nx-cx-cell:first-child { border-top: 0; }
.nx-cx-cell-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .5rem; min-width: 0; }
.nx-cx-cell-value { font-size: 1.25rem; font-weight: 600; color: var(--mono); line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.nx-cx-cell-text { font-size: .875rem; font-weight: 600; color: var(--mono); min-width: 0; overflow-wrap: anywhere; }
.nx-cx-cell-sub { font-size: .75rem; color: var(--secondary-foreground); line-height: 1.45; }
.nx-cx-cell-sub a, .nx-cx-cell a.nx-inline-link { font-size: .75rem; }
@media (max-width: 39.98rem) { .nx-cx-cell-help { display: none; } }   /* phones: Support is one tap away in the tab bar */
.nx-cx-stack { display: inline-flex; padding-inline-start: .25rem; }
.nx-cx-stack .nx-tool-icon { margin-inline-start: -.375rem; box-shadow: 0 0 0 2px var(--card); }
@media (min-width: 40rem) {
  .nx-cx-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-cx-cell { border-top: 0; }
  .nx-cx-cell:nth-child(even) { border-inline-start: 1px solid var(--border); }
  .nx-cx-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (min-width: 80rem) {
  .nx-cx-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nx-cx-cell, .nx-cx-cell:nth-child(n+3) { border-top: 0; border-inline-start: 1px solid var(--border); }
  .nx-cx-cell:first-child { border-inline-start: 0; }
}

/* ============ 4. subscription card ============ */
.nx-sub-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .nx-sub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .nx-sub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.nx-sub { display: flex; flex-direction: column; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.nx-sub:hover { border-color: color-mix(in oklab, var(--primary) 22%, var(--border)); }
.nx-sub-head { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.125rem .875rem; }
.nx-sub-title { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; flex: 1; }
.nx-sub-titlerow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .5rem; min-width: 0; }
.nx-sub-titlerow .kt-badge { flex-shrink: 0; }
.nx-sub-title h3 { min-width: 0; font-size: .9375rem; font-weight: 600; line-height: 1.25; color: var(--mono); letter-spacing: -.005em; }
.nx-sub-title h3 a:hover { color: var(--nx-link); text-decoration: underline; text-underline-offset: 3px; }
.nx-sub-meta { font-size: .75rem; color: var(--secondary-foreground); line-height: 1.4; }
.nx-sub-meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.nx-sub-meta a:hover { color: var(--nx-link); text-decoration-color: currentColor; }
.nx-sub-body { display: flex; flex-direction: column; gap: .625rem; padding: 0 1.125rem 1rem; flex: 1; }
.nx-sub-expiry { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.nx-sub-when { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.nx-sub-when b { font-size: .8125rem; font-weight: 600; color: var(--mono); font-variant-numeric: tabular-nums; }
.nx-sub-left { font-size: .75rem; color: var(--secondary-foreground); white-space: nowrap; text-align: end; }
.nx-sub-left b { display: block; font-size: 1.375rem; line-height: 1.1; font-weight: 600; color: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.nx-sub.is-soon .nx-sub-left b { color: var(--nx-warn-text); }
.nx-sub.is-today .nx-sub-left b { color: var(--nx-bad); }
/* period meter: how much of the paid period is left */
.nx-meter { height: .375rem; border-radius: 999px; background: var(--muted); overflow: hidden; }
.nx-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.nx-meter.is-soon > span { background: #f59e0b; }
.nx-meter.is-today > span { background: var(--nx-bad); }
.nx-meter.is-info > span { background: #8b5cf6; }
.nx-sub-note { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem .625rem; border-radius: 8px; font-size: .75rem; line-height: 1.45; color: var(--secondary-foreground);
  background: color-mix(in oklab, #7c3aed 6%, var(--card)); border: 1px solid color-mix(in oklab, #7c3aed 20%, var(--border)); }
.nx-sub-note i { font-size: .9375rem; color: #7c3aed; margin-top: .0625rem; }
.dark .nx-sub-note i { color: #c4b5fd; }
.nx-sub-note b { color: var(--mono); font-weight: 600; }
.nx-sub-actions { display: flex; gap: .5rem; padding: .875rem 1.125rem; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, var(--card)); }
.nx-sub-actions > .kt-btn { justify-content: center; }
.nx-sub-actions > .nx-sub-open { flex: 1 1 auto; }
.nx-sub-server { display: flex; align-items: center; gap: .375rem; padding: 0 1.125rem .875rem; margin-top: -.25rem; font-size: .75rem; color: var(--secondary-foreground);
  background: color-mix(in oklab, var(--muted) 40%, var(--card)); }
.nx-sub-server i { font-size: .875rem; color: var(--muted-foreground); }
.nx-sub-server b { font-weight: 600; color: var(--mono); }
.nx-sub-server .nx-inline-link { margin-inline-start: auto; font-size: .75rem; }
/* ended subscriptions: compact rows in one card */
.nx-ended-row { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1rem; padding: .75rem 1.125rem; border-top: 1px solid var(--border); }
.nx-ended-row:first-of-type { border-top: 0; }
.nx-ended-main { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1 1 16rem; }
.nx-ended-text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.nx-ended-text b { font-size: .8125rem; font-weight: 600; color: var(--mono); }
.nx-ended-text span { font-size: .75rem; color: var(--secondary-foreground); }
.nx-ended-side { display: flex; align-items: center; gap: .75rem; margin-inline-start: auto; }
.nx-ended-note { font-size: .75rem; color: var(--muted-foreground); white-space: nowrap; }
.nx-ended-side .nx-inline-link { font-size: .75rem; }
@media (max-width: 39.98rem) {
  .nx-ended-side { width: 100%; justify-content: space-between; margin-inline-start: 3rem; width: calc(100% - 3rem); }
}

/* ============ 4b. tool logo, tool boxes (Your tools), compact subscription list ============ */
/* the tool's logo: the image the store uploads for the tool (d.tools[].logo; live $iconUrl) or, until then, a neutral placeholder: the
   tool's monogram tile + its name as a wordmark.
   <span class="nx-tlogo" :style="toolStyle(id)"><img class="nx-tlogo-img" src="…" alt="SEMrush Guru"> | <span class="nx-tool-icon">SG</span><span class="nx-tlogo-name">SEMrush Guru</span></span> */
.nx-tlogo { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-width: 0; max-width: 100%; }
.nx-tlogo .nx-tool-icon { width: 2.75rem; height: 2.75rem; flex-basis: 2.75rem; border-radius: 10px; font-size: .9375rem; }
.nx-tlogo-name { min-width: 0; font-size: 1.1875rem; font-weight: 700; line-height: 1.15; letter-spacing: -.025em; color: var(--mono); text-align: start; text-wrap: balance; overflow-wrap: anywhere; }
.nx-tlogo-img { display: block; max-width: 100%; max-height: 3.25rem; object-fit: contain; }
.dark .nx-tlogo-img { background: #fff; border-radius: 10px; }   /* a dark logo (e.g. black on transparent) stays visible */

/* tool box: one link per tool (to its access page): logo area + a full-width Access now bar; a corner badge only when it matters.
   Grid: 2 per row on phones, 3 from 640 px (768 included: no orphan box), 4 from 1280. */
.nx-tbox-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.nx-tbox-grid > li { display: flex; min-width: 0; }
@media (min-width: 40rem) { .nx-tbox-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 64rem) { .nx-tbox-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 80rem) { .nx-tbox-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nx-tbox {
  position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; overflow: hidden; container-type: inline-size;
  border: 1px solid var(--nx-line-strong); border-radius: 10px; background: var(--card); box-shadow: var(--nx-shadow); color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.nx-tbox-logo {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .625rem; min-height: 8.75rem;
  /* top-aligned under room for the corner badge: every tile sits at the same height across a row, even when a name wraps */
  padding: 2.5rem 1.125rem 1.25rem; text-align: center;
  background: linear-gradient(180deg, var(--card) 35%, color-mix(in oklab, var(--muted) 70%, var(--card)));
}
.nx-tbox-cat { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }
/* the placeholder wordmark scales with the box and stays under the page title's weight */
.nx-tbox .nx-tlogo-name { font-size: clamp(.9375rem, 6.5cqi, 1.125rem); font-weight: 650; }
/* white 13 px text on the bar: the gradient starts at --primary and only darkens (the old white mix fell to 3.9:1 in dark mode) */
.nx-tbox-cta {
  display: flex; align-items: center; justify-content: center; gap: .375rem; height: 2.625rem; padding: 0 .75rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .005em; color: #fff;
  background: linear-gradient(180deg, var(--primary), color-mix(in oklab, var(--primary) 92%, black));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 -1px 0 color-mix(in oklab, var(--primary) 78%, black);
}
.nx-tbox-cta i { font-size: .9375rem; transition: transform .15s; }
.nx-tbox:hover { border-color: color-mix(in oklab, var(--primary) 50%, var(--nx-line-strong)); box-shadow: var(--nx-shadow-lg); }
.nx-tbox:hover .nx-tbox-cta { background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 92%, black), color-mix(in oklab, var(--primary) 84%, black)); }
.nx-tbox:hover .nx-tbox-cta i { transform: translateX(2px); }
.nx-tbox:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 70%, transparent); outline-offset: 3px; border-color: color-mix(in oklab, var(--primary) 60%, var(--nx-line-strong)); }
.nx-tbox:active .nx-tbox-cta { background: color-mix(in oklab, var(--primary) 84%, black); }
.dark .nx-tbox:hover { box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 25%, transparent), var(--nx-shadow-lg); }
.nx-tbox-badge { position: absolute; top: .625rem; inset-inline-end: .625rem; z-index: 1; max-width: calc(100% - 1.25rem); }
.nx-tbox-badge.kt-badge { height: 1.375rem; padding-inline: .4375rem; font-size: .6875rem; }
/* narrow boxes (phones, 640-1023 px): the tile above the name, a little lower so a corner badge never touches it */
@container (max-width: 16.5rem) {
  .nx-tbox-logo { min-height: 8rem; padding: 2.75rem .75rem 1rem; gap: .5rem; }
  .nx-tbox .nx-tlogo { flex-direction: column; gap: .5rem; }
  .nx-tbox .nx-tlogo-name { font-size: 1rem; text-align: center; }
  .nx-tbox .nx-tlogo .nx-tool-icon { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .nx-tbox-cta i { transition: none; } }
/* a tool the platform paused (badge "Unavailable"): a muted "Offline for now" instead of the blue "Access now"; the link still
   opens the access page, which explains the pause */
.nx-tbox.is-off .nx-tbox-cta,
.nx-tbox.is-off:hover .nx-tbox-cta,
.nx-tbox.is-off:active .nx-tbox-cta { color: var(--secondary-foreground); background: var(--muted); }
.nx-tbox.is-off:hover .nx-tbox-cta i { transform: none; }
.nx-tbox.is-off:hover { border-color: var(--nx-line-strong); }

/* active subscriptions as a compact list (one row each): dot, name + plan, end date, time-left badge, Renew; "View other N" */
.nx-sublist { margin: 0; padding: 0; list-style: none; }
.nx-subrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1.125rem; border-top: 1px solid var(--border); min-width: 0; }
.nx-sublist > .nx-subrow:first-child, .nx-sublist > template:first-child + .nx-subrow { border-top: 0; }
.nx-subrow-main { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1 1 16rem; }
.nx-subrow-dot { width: .5rem; height: .5rem; flex: 0 0 .5rem; border-radius: 999px; background: var(--nx-ok); box-shadow: 0 0 0 3px color-mix(in oklab, var(--nx-ok) 18%, transparent); }
.nx-subrow-dot.is-warning { background: #f59e0b; box-shadow: 0 0 0 3px color-mix(in oklab, #f59e0b 20%, transparent); }
.nx-subrow-dot.is-destructive { background: var(--nx-bad); box-shadow: 0 0 0 3px color-mix(in oklab, var(--nx-bad) 18%, transparent); }
.nx-subrow-dot.is-info { background: #8b5cf6; box-shadow: 0 0 0 3px color-mix(in oklab, #8b5cf6 20%, transparent); }
.nx-subrow-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .5rem; min-width: 0; }
.nx-subrow-name { font-size: .875rem; font-weight: 600; color: var(--mono); }
.nx-subrow-name:hover { color: var(--nx-link); text-decoration: underline; text-underline-offset: 3px; }
.nx-subrow-name:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 2px; border-radius: 3px; }
.nx-subrow-plan { font-size: .8125rem; color: var(--secondary-foreground); }
.nx-subrow-side { display: flex; align-items: center; gap: .75rem; margin-inline-start: auto; }
.nx-subrow-until { font-size: .75rem; color: var(--secondary-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-subrow-side .kt-badge { white-space: nowrap; }
.nx-subrow-side .kt-btn { min-width: 5.5rem; justify-content: center; }
@media (max-width: 39.98rem) {
  .nx-subrow { padding-block: .875rem; }
  .nx-subrow-side { width: calc(100% - 1.25rem); margin-inline-start: 1.25rem; gap: .5rem; flex-wrap: wrap; }   /* a long badge (Refund pending) pushes the button to its own line instead of clipping */
  .nx-subrow-side .kt-btn { margin-inline-start: auto; min-width: 0; }
  /* "2 Nov 2026 · 13 days left · Renew" fits one line at 360 px; "Until" stays for screen readers */
  .nx-subrow-until-pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
.nx-sublist-more {
  display: flex; align-items: center; justify-content: center; gap: .375rem; width: 100%; padding: .6875rem 1rem; border: 0; border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 35%, var(--card)); color: var(--nx-link); font-size: .8125rem; font-weight: 500; cursor: pointer;
  border-bottom-left-radius: 9px; border-bottom-right-radius: 9px;
}
.nx-sublist-more:hover { background: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.nx-sublist-more:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: -2px; }
.nx-sublist-more i { font-size: .75rem; transition: transform .15s; }
.nx-sublist-more[aria-expanded="true"] i { transform: rotate(180deg); }

/* ============ 5. servers (the tool's access page) + the store's guide ============ */
/* server groups: one row per group (label + note on the left from 768 px, buttons on the right), real buttons with accessible names;
   primary for the first group, outline for the others; "Last used" marks the last server that opened.
   <div class="nx-sgroups"><div class="nx-sgroup"><div class="nx-sgroup-head"><h3 class="nx-sgroup-title">Main servers <span class="nx-count">6</span></h3>
   <p class="nx-sgroup-note">…</p></div><div class="nx-sbtns" role="group"><button class="kt-btn kt-btn-primary nx-sbtn">Server 1</button>…</div></div></div> */
.nx-sgroups { display: flex; flex-direction: column; }
.nx-sgroup { display: grid; gap: .75rem 1.5rem; padding: 1.125rem; border-top: 1px solid var(--border); min-width: 0; }
.nx-sgroups > .nx-sgroup:first-of-type { border-top: 0; }   /* first-of-type: the first child is Alpine's <template x-for> */
@media (min-width: 48rem) { .nx-sgroup { grid-template-columns: 13rem minmax(0, 1fr); align-items: center; padding-block: 1.25rem; } }
.nx-sgroup-head { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.nx-sgroup.is-only { grid-template-columns: minmax(0, 1fr); }
.nx-sgroup.is-only > .nx-sgroup-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }   /* kept for the group's aria-labelledby */
.nx-sgroup-title { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--mono); }
.nx-sgroup-title .nx-count { margin-inline-start: 0; }
.nx-sgroup-note { font-size: .75rem; line-height: 1.45; color: var(--secondary-foreground); text-wrap: pretty; }
.nx-sbtns { display: flex; flex-wrap: wrap; gap: .875rem .625rem; min-width: 0; }
.nx-sbtn { position: relative; min-width: 7.25rem; height: 2.5rem; justify-content: center; font-weight: 500; }
.nx-sbtn i { font-size: .9375rem; }
.nx-sbtn.is-last.kt-btn-primary { box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 24%, transparent), 0 1px 2px rgba(9, 9, 11, .14); }
.nx-sbtn.is-last.kt-btn-outline { border-color: color-mix(in oklab, var(--primary) 55%, var(--nx-line-strong)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 14%, transparent); }
.nx-sbtn-last {
  position: absolute; top: -.6875rem; inset-inline-end: -.375rem; display: inline-flex; align-items: center; height: 1.25rem; padding: 0 .4375rem;
  border-radius: 999px; border: 1px solid color-mix(in oklab, var(--primary) 35%, var(--nx-line-strong)); background: var(--card);
  color: var(--nx-link); font-size: .6875rem; font-weight: 600; letter-spacing: 0; line-height: 1; white-space: nowrap; pointer-events: none;
}
.kt-btn.nx-sbtn:disabled { opacity: .45; }
@media (max-width: 39.98rem) {
  .nx-sbtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem .5rem; }
  .nx-sbtn { min-width: 0; height: 2.75rem; padding-inline: .25rem; }
  .nx-sbtn i { display: none; }
}
/* one server: a single large Access now button */
.nx-sone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.25rem 1.125rem; }
.nx-sone-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1 1 18rem; }
.nx-sone-text b { font-size: .875rem; font-weight: 600; color: var(--mono); }
.nx-sone-text span { font-size: .8125rem; line-height: 1.5; color: var(--secondary-foreground); }
.nx-sone .kt-btn { position: relative; min-width: 13rem; height: 2.875rem; justify-content: center; font-size: .9375rem; font-weight: 600; }
@media (max-width: 39.98rem) { .nx-sone .kt-btn { width: 100%; } }
/* quick retry buttons in the shell's access-error popup */
.nx-server-quick { display: flex; flex-wrap: wrap; gap: .5rem; }
.nx-server-quick .kt-btn small { font-size: .6875rem; color: var(--muted-foreground); font-weight: 400; }

/* the store's guide for a tool (rich text from the admin panel; .nx-prose): an <ol> becomes numbered steps, never a grey table */
.nx-guide { font-size: .875rem; }
.nx-guide.nx-prose ol { list-style: none; padding: 0; margin: 0; counter-reset: nx-guide; display: flex; flex-direction: column; gap: .875rem; }
.nx-guide.nx-prose ol > li { counter-increment: nx-guide; position: relative; margin: 0; padding-inline-start: 2.375rem; min-height: 1.625rem; line-height: 1.6; padding-top: .0625rem; }
.nx-guide.nx-prose ol > li::before {
  content: counter(nx-guide); position: absolute; inset-inline-start: 0; top: 0; display: grid; place-items: center; width: 1.625rem; height: 1.625rem;
  border-radius: 7px; border: 1px solid var(--nx-line-strong); background: color-mix(in oklab, var(--muted) 70%, var(--card));
  font: 600 .75rem/1 var(--nx-mono); color: var(--secondary-foreground);
}
.nx-guide.nx-prose strong { color: var(--mono); font-weight: 600; }

/* ============ 6. plan picker (1 / 3 / 6 / 12 months; price x months, the live rule) ============ */
.nx-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; border: 0; }
@media (min-width: 40rem) { .nx-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nx-plan { position: relative; display: flex; flex-direction: column; gap: .125rem; padding: .75rem .875rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); cursor: pointer; transition: border-color .12s, background-color .12s, box-shadow .12s; min-width: 0; }
.nx-plan:hover { border-color: var(--input); }
.nx-plan input { position: absolute; opacity: 0; pointer-events: none; }
.nx-plan b { font-size: .875rem; font-weight: 600; color: var(--mono); }
.nx-plan .nx-plan-price { font-size: .8125rem; font-weight: 500; color: var(--foreground); font-variant-numeric: tabular-nums; }
.nx-plan small { font-size: .6875rem; color: var(--muted-foreground); }
.nx-plan:has(input:checked), .nx-plan.is-selected { border-color: color-mix(in oklab, var(--primary) 60%, var(--border)); background: color-mix(in oklab, var(--primary) 5%, var(--card));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 12%, transparent); }
.nx-plan:has(input:checked)::after, .nx-plan.is-selected::after { content: ""; position: absolute; top: .625rem; inset-inline-end: .625rem; width: .5rem; height: .5rem; border-radius: 999px; background: var(--primary); }
.nx-plan:has(input:focus-visible) { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 2px; }

/* ============ 7. cart summary + sticky cart bar ============ */
.nx-cart { display: flex; flex-direction: column; }
.nx-cart-lines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.nx-cart-line { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; border-top: 1px solid var(--border); font-size: .8125rem; }
.nx-cart-line:first-of-type { border-top: 0; }
.nx-cart-line-text { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; flex: 1; }
.nx-cart-line-text b { font-weight: 600; color: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-cart-line-text small { font-size: .75rem; color: var(--secondary-foreground); }
.nx-cart-line-amount { font-weight: 600; color: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-cart-total { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding-top: .75rem; margin-top: .25rem; border-top: 1px solid var(--border); }
.nx-cart-total span { font-size: .8125rem; color: var(--secondary-foreground); }
.nx-cart-total b { font-size: 1.25rem; font-weight: 600; color: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.nx-cart-empty { padding: .75rem 0; font-size: .8125rem; color: var(--muted-foreground); text-align: center; }
/* sticky bar: phones keep the total and Next on screen (M4) */
.nx-cartbar {
  position: sticky; bottom: 1rem; z-index: 15; display: flex; align-items: center; gap: .75rem; padding: .625rem .625rem .625rem 1rem;
  border: 1px solid var(--border); border-radius: 12px; background: color-mix(in oklab, var(--card) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--nx-shadow-lg);
}
.nx-cartbar-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.nx-cartbar-text small { font-size: .75rem; color: var(--secondary-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-cartbar-text b { font-size: 1rem; font-weight: 600; color: var(--mono); font-variant-numeric: tabular-nums; }
@media (max-width: 63.98rem) { .nx-cartbar { bottom: calc(var(--nx-tabbar-h) + env(safe-area-inset-bottom) + .75rem); } }

/* ============ 8. payment instructions ============ */
.nx-pay { display: flex; flex-direction: column; gap: .875rem; }
.nx-pay-methods { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }
.nx-pay-method { display: flex; align-items: center; gap: .75rem; padding: .625rem .625rem .625rem .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); min-width: 0; }
.nx-pay-method-text { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; flex: 1; }
.nx-pay-method-text b { font-size: .8125rem; font-weight: 600; color: var(--mono); }
.nx-pay-method-text small { font-size: .6875rem; color: var(--secondary-foreground); }
.nx-pay-value { font-family: var(--nx-mono); font-size: .75rem; color: var(--mono); overflow-wrap: anywhere; line-height: 1.4; }
.nx-pay-method .kt-btn { flex-shrink: 0; }
.nx-pay-amount { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .875rem; border-radius: 10px;
  background: color-mix(in oklab, var(--primary) 6%, var(--card)); border: 1px solid color-mix(in oklab, var(--primary) 22%, var(--border)); }
.nx-pay-amount span { font-size: .8125rem; color: var(--secondary-foreground); }
.nx-pay-amount b { font-size: 1.25rem; font-weight: 600; color: var(--mono); font-variant-numeric: tabular-nums; }

/* ============ 9. upload drop zone ============ */
.nx-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 11rem; padding: 1.5rem 1rem;
  border: 1.5px dashed var(--input); border-radius: 12px; background: color-mix(in oklab, var(--muted) 45%, var(--card)); text-align: center; cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.nx-drop:hover, .nx-drop.is-over { border-color: color-mix(in oklab, var(--primary) 60%, var(--border)); background: color-mix(in oklab, var(--primary) 5%, var(--card)); }
.nx-drop:focus-within { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 2px; }
.nx-drop.is-invalid { border-color: color-mix(in oklab, var(--nx-bad) 60%, var(--border)); background: color-mix(in oklab, var(--nx-bad) 4%, var(--card)); }
.nx-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.nx-drop-title { font-size: .875rem; font-weight: 600; color: var(--mono); }
.nx-drop-title u { color: var(--nx-link); text-decoration: none; }
.nx-drop-hint { font-size: .75rem; color: var(--secondary-foreground); }
.nx-drop-file { display: flex; align-items: center; gap: .875rem; padding: .75rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card); min-width: 0; }
.nx-drop-thumb { width: 4rem; height: 5.25rem; flex: 0 0 4rem; border-radius: 8px; border: 1px solid var(--border); background: var(--muted); object-fit: cover; object-position: top; }
.nx-drop-meta { display: flex; flex-direction: column; gap: .125rem; min-width: 0; flex: 1; }
.nx-drop-meta b { font-size: .8125rem; font-weight: 600; color: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-drop-meta span { font-size: .75rem; color: var(--secondary-foreground); }
.nx-drop-meta .nx-saved { font-size: .75rem; }
/* "Replace" is a label around a visually hidden file input: show the keyboard focus on the button (review c2) */
.nx-drop-actions label.kt-btn:focus-within { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 2px; }
.nx-drop-actions { display: flex; gap: .375rem; flex-shrink: 0; }
@media (max-width: 39.98rem) { .nx-drop-file { flex-wrap: wrap; } .nx-drop-actions { width: 100%; } .nx-drop-actions > .kt-btn { flex: 1 1 0; justify-content: center; } }

/* ============ 10. order status timeline ============ */
.nx-timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.nx-timeline-step { position: relative; display: flex; gap: .75rem; padding-bottom: 1rem; }
.nx-timeline-step:last-child { padding-bottom: 0; }
.nx-timeline-step:not(:last-child)::before { content: ""; position: absolute; top: 1.75rem; bottom: .25rem; inset-inline-start: .8125rem; width: 2px; border-radius: 2px; background: var(--border); }
.nx-timeline-step.is-done:not(:last-child)::before { background: color-mix(in oklab, var(--nx-ok) 50%, var(--border)); }
.nx-timeline-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); font-size: .875rem; }
.nx-timeline-step.is-done .nx-timeline-dot { background: color-mix(in oklab, var(--nx-ok) 12%, var(--card)); border-color: color-mix(in oklab, var(--nx-ok) 40%, transparent); color: var(--nx-ok-text); }
.nx-timeline-step.is-current .nx-timeline-dot { background: color-mix(in oklab, #f59e0b 14%, var(--card)); border-color: color-mix(in oklab, #f59e0b 45%, transparent); color: var(--nx-warn-text);
  box-shadow: 0 0 0 4px color-mix(in oklab, #f59e0b 12%, transparent); }
.nx-timeline-step.is-failed .nx-timeline-dot { background: color-mix(in oklab, var(--nx-bad) 10%, var(--card)); border-color: color-mix(in oklab, var(--nx-bad) 40%, transparent); color: var(--nx-bad); }
.nx-timeline-text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; padding-top: .25rem; }
.nx-timeline-text b { font-size: .8125rem; font-weight: 600; color: var(--mono); }
.nx-timeline-step:not(.is-done):not(.is-current):not(.is-failed) .nx-timeline-text b { color: var(--secondary-foreground); font-weight: 500; }
.nx-timeline-text span { font-size: .75rem; color: var(--secondary-foreground); line-height: 1.45; }
.nx-timeline-text time { font-family: var(--nx-mono); font-size: .6875rem; color: var(--muted-foreground); }

/* ============ 11. invoice sheet (HTML preview of the PDF) ============ */
.nx-invoice-wrap { container-type: inline-size; }
.nx-invoice {
  width: 100%; max-width: 50rem; margin-inline: auto; padding: 2.5rem 2.75rem 2rem; border: 1px solid var(--border); border-radius: 6px; background: var(--card);
  box-shadow: 0 1px 2px rgba(9, 9, 11, .05), 0 18px 40px -24px rgba(9, 9, 11, .35); color: var(--foreground); font-size: .8125rem; line-height: 1.5;
}
.dark .nx-invoice { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); }
.nx-invoice-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1.125rem; border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--nx-store-from), var(--nx-store-to)) 1; }
.nx-invoice-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.nx-invoice-brand b { display: block; font-size: 1.125rem; font-weight: 700; color: var(--mono); letter-spacing: -.01em; }
.nx-invoice-brand > div > span { font-size: .75rem; color: var(--secondary-foreground); }
.nx-invoice-doc { text-align: end; }
.nx-invoice-doc h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mono); line-height: 1.1; }
.nx-invoice-doc > span { font-family: var(--nx-mono); font-size: .75rem; color: var(--secondary-foreground); }
.nx-invoice-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; padding-block: 1.5rem; }
.nx-invoice-meta .nx-kv > div { padding: .25rem 0; border: 0; gap: 1.5rem; }
.nx-invoice-party b { display: block; font-weight: 600; color: var(--mono); }
.nx-invoice-party span { color: var(--secondary-foreground); }
.nx-invoice table { width: 100%; border-collapse: collapse; }
.nx-invoice thead th { padding: .5rem .75rem; text-align: start; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground);
  background: color-mix(in oklab, var(--muted) 70%, var(--card)); border-block: 1px solid var(--border); }
.nx-invoice tbody td { padding: .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.nx-invoice .nx-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-invoice tbody td b { font-weight: 600; color: var(--mono); }
.nx-invoice tbody td small { display: block; font-size: .75rem; color: var(--secondary-foreground); }
.nx-invoice-total { display: flex; justify-content: flex-end; padding-top: .875rem; }
.nx-invoice-total dl { width: min(100%, 18rem); margin: 0; }
.nx-invoice-total dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .375rem .75rem; }
.nx-invoice-total dl > div.is-grand { border-top: 2px solid var(--mono); font-size: 1rem; font-weight: 700; color: var(--mono); }
.nx-invoice-total dd { margin: 0; font-variant-numeric: tabular-nums; }
.nx-invoice-note { margin-top: 1.5rem; padding: .75rem .875rem; border-inline-start: 3px solid var(--nx-store-tint); border-radius: 0 6px 6px 0; background: color-mix(in oklab, var(--nx-store-tint) 6%, var(--card)); color: var(--foreground); }
.nx-invoice-note.is-rejected { border-inline-start-color: var(--nx-bad); background: color-mix(in oklab, var(--nx-bad) 6%, var(--card)); }
.nx-invoice-foot { margin-top: 2rem; padding-top: .875rem; border-top: 1px solid var(--border); text-align: center; font-size: .6875rem; color: var(--muted-foreground); }
@container (max-width: 560px) {
  .nx-invoice { padding: 1.25rem 1rem 1rem; }
  .nx-invoice-meta { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .nx-invoice-doc { text-align: start; }
  .nx-invoice thead { display: none; }
  .nx-invoice tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .nx-invoice tbody td { border: 0; padding: .5rem 0; }
  .nx-invoice tbody tr { border-bottom: 1px solid var(--border); }
  .nx-invoice tbody td.nx-inv-idx, .nx-invoice tbody td.nx-inv-unit { display: none; }
}
/* A4 sheet (210 x 297) on wide screens; content can still grow it and the footer sits at the bottom of the page.
   <article class="nx-invoice nx-invoice-a4 is-pending|is-rejected"><span class="nx-invoice-watermark">Pending</span>…</article> */
.nx-invoice-a4 { position: relative; overflow: hidden; display: flex; flex-direction: column; aspect-ratio: 210 / 297; }
.nx-invoice-a4 > * { position: relative; z-index: 1; }
.nx-invoice-a4 .nx-invoice-total { margin-bottom: 2rem; }
.nx-invoice-a4 .nx-invoice-note { margin-top: -.5rem; margin-bottom: 2rem; }
.nx-invoice-a4 .nx-invoice-foot { margin-top: auto; }
@container (max-width: 560px) { .nx-invoice-a4 { aspect-ratio: auto; } }
/* receipt watermark for pending / rejected orders (prints too); sized by the word so "Not approved" never runs off the sheet */
.nx-invoice-watermark {
  position: absolute !important; z-index: 0 !important; inset: 0; display: grid; place-items: center; pointer-events: none;
  font: 800 clamp(1.75rem, 11cqi, 6.5rem)/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in oklab, #f59e0b 13%, transparent); transform: rotate(-28deg); -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.nx-invoice.is-rejected .nx-invoice-watermark { font-size: clamp(1.5rem, 7cqi, 4.25rem); color: color-mix(in oklab, var(--nx-bad) 10%, transparent); }
.dark .nx-invoice-watermark { color: color-mix(in oklab, #f59e0b 16%, transparent); }
.dark .nx-invoice.is-rejected .nx-invoice-watermark { color: color-mix(in oklab, var(--nx-bad) 16%, transparent); }
.nx-invoice.is-pending .nx-invoice-doc h2 { color: var(--nx-warn-text); }
.nx-invoice.is-rejected .nx-invoice-doc h2 { color: var(--nx-bad); }
/* print: the sheet only, full width, dark ink on white paper whatever the screen theme (browsers drop backgrounds, so a
   dark-mode sheet would print light grey on white; review c2). The only literal colours here are print-only. */
@media print {
  .nx-rail, .nx-cx-header, .nx-tabbar, .nx-cx-footer, .nx-page-head, .nx-invoice-tools, .nx-toasts { display: none !important; }
  html, body, .nx-cx-wrap, .nx-cx-main { background: #fff !important; }
  .nx-cx-wrap { margin: 0 !important; padding: 0 !important; }
  .nx-cx-main { padding: 0 !important; }
  .nx-invoice {
    max-width: none; aspect-ratio: auto; min-height: 0; padding: 0; color-scheme: light; background: #fff !important; color: #27272a; box-shadow: none !important; border: 0 !important;
    --background: #fff; --card: #fff; --foreground: #27272a; --card-foreground: #27272a; --mono: #09090b; --muted: #f4f4f5;
    --muted-foreground: #71717a; --secondary-foreground: #52525b; --border: #e4e4e7; --nx-warn-text: #a16207;
    --nx-bad: #dc2626; --nx-ok: #16a34a; --nx-ok-text: #15803d; --nx-link: #1d4ed8;
  }
  .dark .nx-invoice .kt-badge-outline.kt-badge-success { color: #15803d; }
  .dark .nx-invoice .kt-badge-outline.kt-badge-warning { color: #a16207; }
  .dark .nx-invoice .kt-badge-outline.kt-badge-destructive { color: #b91c1c; }
  .dark .nx-invoice-watermark { color: color-mix(in oklab, #f59e0b 13%, transparent); }
  .dark .nx-invoice.is-rejected .nx-invoice-watermark { color: color-mix(in oklab, #dc2626 10%, transparent); }
}

/* ============ 12. how-it-works steps, welcome, spinner, misc ============ */
.nx-howto { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; counter-reset: nx-howto; }
@media (min-width: 48rem) { .nx-howto { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nx-howto li { counter-increment: nx-howto; display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); text-align: start; }
.nx-howto li::before { content: counter(nx-howto); display: grid; place-items: center; flex: 0 0 1.75rem; height: 1.75rem; border-radius: 8px; font: 600 .8125rem/1 var(--nx-mono);
  color: #fff; background: var(--nx-store-grad); }
.nx-howto b { display: block; font-size: .8125rem; font-weight: 600; color: var(--mono); }
.nx-howto span { font-size: .75rem; line-height: 1.45; color: var(--secondary-foreground); }
.nx-welcome { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.5rem 1.25rem 1.5rem; text-align: center; }
.nx-welcome h2 { font-size: 1.125rem; font-weight: 600; color: var(--mono); letter-spacing: -.01em; }
.nx-welcome p { font-size: .875rem; color: var(--secondary-foreground); max-width: 34rem; text-wrap: pretty; }
.nx-welcome .nx-howto { width: 100%; max-width: 52rem; margin-top: .5rem; }
.nx-spin { display: inline-block; width: .875rem; height: .875rem; flex: 0 0 .875rem; border-radius: 999px; border: 2px solid currentColor; border-inline-end-color: transparent; animation: nx-rot .7s linear infinite; }
@keyframes nx-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nx-spin { animation-duration: 2s; } }
.nx-greet { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; }
@media (max-width: 39.98rem) { .nx-greet { flex-direction: column; align-items: flex-start; gap: .125rem; } .nx-greet .nx-sep { display: none; } }
.nx-notices { display: flex; flex-direction: column; gap: .75rem; }
.nx-tool-list { display: inline; }
.nx-warn { color: var(--nx-warn-text) !important; }
.nx-bad { color: var(--nx-bad) !important; }
.kt-btn.is-busy { cursor: progress; }
.kt-btn.is-busy:active { transform: none; }
.sr-only-focusable:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.nx-cx-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; }
.nx-cx-section-head p { font-size: .75rem; color: var(--secondary-foreground); }

/* ============ 13. auth / error / store page touches ============ */
.nx-cx-brand { gap: .625rem; }
.nx-cx-brand .nx-store-mark { box-shadow: none; }
/* the sign-in pages' top bar: the store's name stays on one line next to the currency switcher (it wrapped to two at 320 px) */
.nx-auth-top > .nx-cx-brand { min-width: 0; }
.nx-auth-top > .nx-cx-brand > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-auth-top-actions { flex-shrink: 0; }
/* the store's accent as a soft glow behind the card: the storefront's colours carried into sign-in (H3) */
.nx-cx-auth { position: relative; isolation: isolate; }
.nx-cx-auth::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 22rem; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in oklab, var(--nx-store-tint) 12%, transparent), transparent 70%); }
.dark .nx-cx-auth::before { background: radial-gradient(60% 100% at 50% 0%, color-mix(in oklab, var(--nx-store-tint) 18%, transparent), transparent 70%); }
@media (max-width: 39.98rem) { .nx-cx-auth-back { width: 2rem; padding: 0; justify-content: center; font-size: 0; } .nx-cx-auth-back i { font-size: 1rem; } }
.nx-auth-top-actions { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; }
span.nx-cx-brand { cursor: default; }                       /* pages.json "storeLinks": false (Store unavailable): the brand is not a link */
/* no store on this address (Store unavailable ?state=unknown): no store identity at all, no store glow */
.nx-cx-auth.is-nostore .nx-cx-brand, .nx-cx-auth.is-nostore .nx-auth-foot-store { display: none; }
.nx-cx-auth.is-nostore::before { display: none; }
/* the store mark at the top of an auth card */
.nx-auth-store { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.nx-auth-store small { font-size: .75rem; color: var(--secondary-foreground); }

/* ============ 14. page patterns every customer screen shares (consolidation pass) ============ */
/* card heading: title (+ nx-count) with its one-line description UNDER it; the right side of a card header is only for
   actions, a status badge or a decorative icon (never a second caption).
   <div class="kt-card-header"><div class="nx-card-heading"><h2 class="kt-card-title">Orders <span class="nx-count">4</span></h2>
   <p class="nx-card-sub">Newest first · 25 per page</p></div> [actions] </div> */
.nx-card-heading { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1 1 14rem; }
.nx-card-heading .kt-card-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .5rem; line-height: 1.3; }
.nx-card-heading .kt-card-title .nx-count { margin-inline-start: 0; }
.nx-card-sub { font-size: .75rem; line-height: 1.45; color: var(--secondary-foreground); text-wrap: pretty; }
.kt-card-header:has(> .nx-card-heading .nx-card-sub) { padding-block: .875rem; }

/* filter bar: the merchant kit's .nx-filters (every control has a visible label: Search, Status…; Reset on the right) is the one
   filter pattern of the area. Under a table / list card's header, or on its own above a card grid:
   <div class="kt-card nx-filters-card"><div class="nx-filters" role="search">…</div></div>
   A status filter is a labelled segmented control: <div class="nx-filter nx-filter-status"><span class="nx-filter-label" id="…">Status</span>
   <div class="nx-seg" role="group" aria-labelledby="…"><button class="kt-tab-toggle">All <span class="nx-count">5</span></button>…</div></div> */
.kt-card:has(> .nx-filters) { container-type: inline-size; }
.nx-filters-card > .nx-filters { border-bottom: 0; border-radius: inherit; }
.nx-filters .nx-filter-search { flex: 0 1 20rem; }
.nx-filters .nx-filter-search .nx-search { width: 100%; }
.nx-filters .nx-seg { height: 2.125rem; align-items: stretch; background: var(--muted); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.nx-filters .nx-seg .kt-tab-toggle { display: inline-flex; align-items: center; height: auto; padding-block: 0; white-space: nowrap; gap: 0; }
.nx-filters .nx-seg .kt-tab-toggle.active { background: var(--card); }
.nx-filter-count { font-size: .75rem; color: var(--secondary-foreground); white-space: nowrap; }
@container (max-width: 640px) {
  .nx-filters .nx-filter-status { grid-column: 1 / -1; }
  /* equal columns, but never narrower than a tab's label + count: two-digit counts ("Accepted 13", "Rejected 11") ran into the
     next tab at 390 px; on a phone narrower than 360 px the row scrolls (overflow-x above) instead of overlapping */
  .nx-filters .nx-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); width: 100%; }
  .nx-filters .nx-seg .kt-tab-toggle { display: flex; align-items: center; justify-content: center; min-width: 0; padding-inline: .25rem; font-size: .75rem; }
  .nx-filters .nx-seg .nx-count { margin-inline-start: .25rem; min-width: 1rem; padding: 0 .25rem; }
  .nx-filter-actions .nx-filter-count { flex: 1 1 auto; }
}
@container (max-width: 330px) {   /* 360 px phones: tighter tabs so four of them with two-digit counts still fit without scrolling */
  .nx-filters .nx-seg .kt-tab-toggle { padding-inline: .125rem; }
  .nx-filters .nx-seg .nx-count { margin-inline-start: .1875rem; padding: 0 .1875rem; }
}

/* full-card empty and "not found" states (a card that holds only the message): one size everywhere. Empty table cells keep
   the kit's compact .nx-empty; a first-time page gets .nx-welcome (§12). */
.kt-card > .nx-empty, .kt-card > div > .nx-empty:only-child { padding: 2.5rem 1.25rem 2.25rem; gap: .5rem; }
.kt-card > .nx-empty .nx-empty-title, .kt-card > div > .nx-empty:only-child .nx-empty-title { font-size: 1rem; line-height: 1.35; text-wrap: balance; }
.kt-card > .nx-empty .nx-empty-text, .kt-card > div > .nx-empty:only-child .nx-empty-text { max-width: 30rem; font-size: .8125rem; line-height: 1.55; text-wrap: pretty; }
.nx-empty > .nx-tool-icon { margin-bottom: .25rem; }

/* alerts: the kit lays out .kt-alert-actions; contact buttons with long handles wrap inside a phone-width alert (review c2) */
.kt-alert .kt-alert-content { min-width: 0; }
.nx-alert-channels .kt-btn { max-width: 100%; height: auto; min-height: 2rem; padding-block: .3125rem; white-space: normal; text-align: start; }
.nx-alert-channels .kt-btn span { overflow-wrap: anywhere; }

/* the store's rich text: links that leave the area say so (was repeated in two page.css files) */
.nx-prose a[target="_blank"]::after { content: " ↗" / " (opens in a new tab)"; font-size: .75em; color: var(--muted-foreground); }

/* phones: header buttons that only repeat a bottom-tab-bar destination are hidden (the page's primary action stays) */
@media (max-width: 39.98rem) { .nx-sm-hide { display: none !important; } }

/* desktop side column (from 1280 px) that stays in view under the sticky header: New order's cart, Plan details' plan card */
@media (min-width: 80rem) { .nx-sticky-side { position: sticky; top: calc(var(--nx-header-h) + 1.25rem); } }

/* icon + text points with separators (what it means for you, what you'll hear about; was in two page.css files)
   <ul class="nx-points"><li><span class="nx-icon nx-icon-sm nx-tone-primary" aria-hidden="true">…</span><span class="flex flex-col gap-0.5 min-w-0"><b>Title</b><span>Text</span></span></li></ul> */
.nx-points { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.nx-points > li { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 0; border-top: 1px solid var(--border); font-size: .8125rem; line-height: 1.45; color: var(--secondary-foreground); }
.nx-points > li:first-of-type { border-top: 0; }
.nx-points b { font-weight: 600; color: var(--mono); }
/* a small note with an icon under a card's content (plan rules, server hints, "Next: …") */
.nx-note { display: flex; gap: .5rem; align-items: flex-start; font-size: .75rem; line-height: 1.5; color: var(--secondary-foreground); text-wrap: pretty; }
.nx-note > i { font-size: .875rem; color: var(--muted-foreground); margin-top: .125rem; flex-shrink: 0; }
/* a sent file: thumbnail, name, meta (New order's confirmation, History's payment screenshot; a <button> opens the viewer) */
.nx-file { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .625rem; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in oklab, var(--muted) 32%, var(--card)); text-align: start; min-width: 0; }
.nx-file img { width: 2.5rem; height: 3.25rem; flex: 0 0 2.5rem; border-radius: 6px; border: 1px solid var(--border); object-fit: cover; object-position: top; background: var(--muted); }
.nx-file > span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nx-file b { font-size: .8125rem; font-weight: 600; color: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-file small { font-size: .75rem; color: var(--secondary-foreground); }
.nx-file > i { color: var(--muted-foreground); }
button.nx-file { cursor: zoom-in; }
button.nx-file:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
button.nx-file:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 2px; }
/* the error code chip in the tone of what happened (merchant kit nx-error-code is always primary): Store unavailable paused / closed */
.nx-error-code.is-warning { color: color-mix(in oklab, var(--nx-warn-text) 85%, black); border-color: color-mix(in oklab, var(--nx-warn-text) 30%, var(--border)); background: color-mix(in oklab, var(--nx-warn-text) 5%, var(--card)); }
.nx-error-code.is-destructive { color: color-mix(in oklab, var(--destructive) 85%, black); border-color: color-mix(in oklab, var(--destructive) 28%, var(--border)); background: color-mix(in oklab, var(--destructive) 5%, var(--card)); }
.dark .nx-error-code.is-warning { color: var(--nx-warn-text); }
.dark .nx-error-code.is-destructive { color: var(--nx-bad); }

/* ============ 15. production shell (customer::layouts.base / auth; the prototype drew these with Alpine) ============ */
/* theme buttons render both glyphs and the theme class on <html> shows one, so the icon is right on the first paint, before Alpine
   starts, and on the auth pages (no Alpine there) */
html:not(.dark) .nx-theme-ic-sun, html.dark .nx-theme-ic-moon { display: none !important; }
/* the account menu's Log out is a POST form: the form adds no box of its own */
.nx-menu form { display: contents; }
/* without the prototype's demo note the auth pages are shorter than a screen: the page (and its dot pattern) fills the viewport, the
   card stays right under the top bar as in the prototype, and the store's footer sits at the bottom */
.nx-cx-auth { min-height: 100vh; min-height: 100dvh; }
.nx-cx-auth > .nx-auth-main { justify-content: flex-start; }

/* ---- the slim top progress bar (task 500; NX.topbar in nox-customer.js): a page of the customer area is loading. The store's
        accent (--primary), above every header, drawer and modal, never in the way of a click. Reduced motion: a still bar. ---- */
.nx-topbar { position: fixed; inset: 0 0 auto 0; z-index: 2147483000; height: 3px; pointer-events: none; opacity: 0; visibility: hidden; }
.nx-topbar.is-on { opacity: 1; visibility: visible; }
.nx-topbar > span { display: block; height: 100%; background: var(--primary); transform: scaleX(0); transform-origin: 0 50%;
  box-shadow: 0 0 10px color-mix(in oklab, var(--primary) 55%, transparent); transition: transform .26s cubic-bezier(.2, .7, .3, 1); }
[dir="rtl"] .nx-topbar > span { transform-origin: 100% 50%; }
.nx-topbar.is-done { opacity: 0; transition: opacity .28s ease .18s, visibility 0s linear .46s; }
@media (prefers-reduced-motion: reduce) {
  .nx-topbar > span, .nx-topbar.is-done { transition: none; }
}