/*
 * APEX ERP — the MAPEX Hub skin.
 *
 * Loaded after `styles.css` and `styles-r39.css`. It changes how the shell looks,
 * never what it does: every selector here exists in those two files, and no
 * screen's markup changed for it.
 *
 * THE DIRECTION. The MAPEX Hub tokens (packages/ui/src/styles.css): calm,
 * precise, enterprise. White surfaces on a cool paper, one blue for action and
 * position, colour only where it carries a meaning (good / warn / bad). Type is
 * IBM Plex Sans Arabic for words and Inter for digits, with tabular figures so
 * money still lines up down a column without a monospace.
 *
 * FEEL. Every control answers on press (`:active`), a busy button says so
 * (`[data-busy]`, set by feel.js), and a screen that is still loading shows its
 * shape instead of a blank page (`.view:empty`).
 *
 * THEMES. Light by default. Dark follows the system unless the reader picked
 * one; the pick is `data-theme` on <html>, set by feel.js.
 */

/* ===================================================================== fonts */

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ==================================================================== tokens */
/*
 * The incumbent token names are kept so every rule in styles.css follows; only
 * their values move to the MAPEX palette. `--gold` was "the one accent: identity
 * and current position" — that role is now the APEX blue.
 */

:root {
  --ink: #0b1220;
  --ink-soft: #455064;
  --ink-faint: #5f6b80;
  --paper: #f5f7fa;
  --paper-raised: #ffffff;
  --rule: #e2e6ed;
  --rule-strong: #c8ced9;
  --gold: #2447e0;
  --gold-bright: #6f8bfa;
  --good: #0b7f57;
  --warn: #a8650a;
  --bad: #c8322f;
  --info: #2447e0;
  --absent: #6b4fa0;

  --mx-surface-2: #eef1f5;
  --mx-head: #f6f8fa;
  --mx-primary: #2447e0;
  --mx-primary-hover: #1d39b8;
  --mx-primary-press: #172d93;
  --mx-primary-soft: #f1f4ff;
  --mx-primary-tint: #e4eaff;
  --mx-on-primary: #ffffff;
  --mx-ring: rgb(36 71 224 / 0.28);
  --mx-shadow-xs: 0 1px 2px rgb(11 18 32 / 0.05);
  --mx-shadow-sm: 0 1px 3px rgb(11 18 32 / 0.06), 0 1px 2px rgb(11 18 32 / 0.04);
  --mx-shadow-lg: 0 24px 48px -12px rgb(11 18 32 / 0.22);
  --mx-scrim: rgb(7 11 20 / 0.42);
  --mx-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --mx-radius: 8px;
  --mx-radius-lg: 12px;

  --sidebar-w: 16rem;
  --topbar-h: 3.5rem;
  --text-h1: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --text-h2: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);

  --sans: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  /* Figures: the same face with tabular digits, not a typewriter. */
  --mono: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --mx-code: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'IBM Plex Sans Arabic';

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink: #f3f5f9;
    --ink-soft: #c8ced9;
    --ink-faint: #949eb0;
    --paper: #070b14;
    --paper-raised: #0e1524;
    --rule: #222c3f;
    --rule-strong: #364156;
    --gold: #6f8bfa;
    --gold-bright: #cdd7fe;
    --good: #3cc493;
    --warn: #e3a843;
    --bad: #f26b66;
    --info: #8ba2fb;
    --absent: #b49ae6;
    --mx-surface-2: #172033;
    --mx-head: #111a2b;
    --mx-primary: #3e62f4;
    --mx-primary-hover: #5576f6;
    --mx-primary-press: #2447e0;
    --mx-primary-soft: rgb(62 98 244 / 0.14);
    --mx-primary-tint: rgb(62 98 244 / 0.24);
    --mx-ring: rgb(111 139 250 / 0.45);
    --mx-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --mx-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45);
    --mx-shadow-lg: 0 24px 48px -12px rgb(0 0 0 / 0.6);
    --mx-scrim: rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --ink: #f3f5f9;
  --ink-soft: #c8ced9;
  --ink-faint: #949eb0;
  --paper: #070b14;
  --paper-raised: #0e1524;
  --rule: #222c3f;
  --rule-strong: #364156;
  --gold: #6f8bfa;
  --gold-bright: #cdd7fe;
  --good: #3cc493;
  --warn: #e3a843;
  --bad: #f26b66;
  --info: #8ba2fb;
  --absent: #b49ae6;
  --mx-surface-2: #172033;
  --mx-head: #111a2b;
  --mx-primary: #3e62f4;
  --mx-primary-hover: #5576f6;
  --mx-primary-press: #2447e0;
  --mx-primary-soft: rgb(62 98 244 / 0.14);
  --mx-primary-tint: rgb(62 98 244 / 0.24);
  --mx-ring: rgb(111 139 250 / 0.45);
  --mx-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --mx-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45);
  --mx-shadow-lg: 0 24px 48px -12px rgb(0 0 0 / 0.6);
  --mx-scrim: rgb(0 0 0 / 0.6);
  color-scheme: dark;
}

/* ============================================================ browser surfaces */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  accent-color: var(--mx-primary);
  scrollbar-color: var(--rule-strong) transparent;
}

/*
 * THE SMART BACKGROUND. Three quiet layers behind the work, never on top of it:
 *   - a fine dot grid, faded toward the edges (the "measured" ground of a ledger);
 *   - two soft fields of the brand blue and a cool cyan, drifting very slowly;
 *   - a light that follows the pointer (feel.js sets --mx-px / --mx-py), so the
 *     page answers the hand. Fixed layers, transform-only motion, off for
 *     reduced motion, absent on touch, absent in print.
 */
html {
  background: var(--paper);
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body::before {
  inset: -10%;
  background:
    radial-gradient(
      42rem 30rem at 78% 8%,
      color-mix(in oklab, var(--mx-primary) var(--mx-aura), transparent),
      transparent 70%
    ),
    radial-gradient(
      36rem 28rem at 12% 92%,
      color-mix(in oklab, #22b8cf var(--mx-aura), transparent),
      transparent 70%
    ),
    radial-gradient(
        circle at 1px 1px,
        color-mix(in oklab, var(--ink) var(--mx-dots), transparent) 1px,
        transparent 1.4px
      )
      0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 35%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 75% at 50% 35%, #000 40%, transparent 100%);
  animation: mx-drift 38s ease-in-out infinite alternate;
}

body::after {
  background: radial-gradient(
    28rem circle at var(--mx-px, 70%) var(--mx-py, 20%),
    color-mix(in oklab, var(--mx-primary) var(--mx-glow), transparent),
    transparent 65%
  );
  opacity: var(--mx-glow-on, 0);
  transition: opacity 600ms ease;
}

:root {
  --mx-aura: 9%;
  --mx-dots: 9%;
  --mx-glow: 7%;
}

:root[data-theme='dark'] {
  --mx-aura: 16%;
  --mx-dots: 12%;
  --mx-glow: 12%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --mx-aura: 16%;
    --mx-dots: 12%;
    --mx-glow: 12%;
  }
}

@keyframes mx-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-3%, 2%, 0) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }

  body::after {
    display: none;
  }
}

@media print {
  body::before,
  body::after {
    display: none;
  }
}

body {
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01';
}

::selection {
  background: var(--mx-primary-tint);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--mx-primary);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  letter-spacing: 0;
  line-height: 1.3;
  text-wrap: balance;
}

h1 {
  font-weight: 700;
}

h2,
h3 {
  font-weight: 600;
}

code,
.hash {
  font-family: var(--mx-code);
  background: var(--mx-surface-2);
  border-radius: 5px;
}

a {
  color: var(--mx-primary);
  text-underline-offset: 3px;
}

/* =================================================================== sidebar */

.sidebar {
  background: var(--paper-raised);
  color: var(--ink);
  border-inline-end: 1px solid var(--rule);
}

.sidebar__brand {
  padding: 0.95rem 1.1rem;
  border-block-end: 1px solid var(--rule);
}

/* The APEX mark from packages/ui/logo.tsx: the peak, solid, in the brand blue. */
.sidebar__mark {
  inline-size: 2.1rem;
  block-size: 2.1rem;
  border: 0;
  border-radius: 9px;
  font-size: 0;
  color: transparent;
  /* Our mark by default (packages/ui/logo.tsx MapexMark), never a letter. */
  background: url('/brand/mark.svg') center / 100% no-repeat;
  box-shadow:
    var(--mx-shadow-sm),
    0 0 0 1px var(--rule);
}

/* The same mark heads the sign-in card. */
.login__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
}

.login__brand::before {
  content: '';
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: 10px;
  background: url('/brand/mark.svg') center / 100% no-repeat;
  box-shadow: var(--mx-shadow-sm);
}

.login {
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--mx-shadow-lg);
  background: color-mix(in oklab, var(--paper-raised) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
}

.sidebar__name strong {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0;
}

.sidebar__name small {
  color: var(--ink-faint);
  font-size: 0.72rem;
  letter-spacing: 0;
}

.nav {
  padding: 0.6rem 0 1.25rem;
  scrollbar-color: var(--rule-strong) transparent;
}

.nav__heading,
.nav__link {
  inline-size: auto;
  margin-inline: 0.55rem;
  padding: 0.46rem 0.65rem;
  border: 0;
  border-radius: var(--mx-radius);
  color: var(--ink-soft);
  font-size: 0.89rem;
  font-weight: 500;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    transform 120ms var(--mx-ease);
}

.nav__heading,
.nav__link--top {
  color: var(--ink);
  font-weight: 600;
}

.nav__heading:hover,
.nav__link:hover {
  background: var(--mx-surface-2);
  color: var(--ink);
}

.nav__heading:active,
.nav__link:active {
  transform: scale(0.985);
  background: var(--rule);
}

.nav__heading:focus-visible,
.nav__link:focus-visible {
  outline: 2px solid var(--mx-primary);
  outline-offset: -2px;
}

.nav__link[aria-current='page'] {
  background: var(--mx-primary-soft);
  color: var(--mx-primary);
  font-weight: 600;
}

.nav__link[aria-current='page'] .nav__icon {
  color: var(--mx-primary);
}

/* Screens under a section: indented on a hairline guide, no glyph of their own. */
.nav__list {
  position: relative;
  padding-block: 0.1rem 0.4rem;
}

.nav__list::before {
  content: '';
  position: absolute;
  inset-block: 0.25rem 0.55rem;
  inset-inline-start: 1.68rem;
  inline-size: 1px;
  background: var(--rule);
}

.nav__list .nav__link {
  position: relative;
  margin-inline-start: 1.45rem;
  padding-inline-start: 0.9rem;
  font-size: 0.86rem;
}

.nav__list .nav__icon {
  display: none;
}

.nav__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  color: var(--ink-faint);
  opacity: 1;
}

.nav__icon svg {
  inline-size: 1.08rem;
  block-size: 1.08rem;
}

.nav__dot {
  background: var(--mx-primary);
}

.nav__chevron {
  opacity: 0.45;
  transition: transform 160ms var(--mx-ease);
}

.nav__empty {
  color: var(--ink-faint);
}

.nav__empty strong {
  color: var(--ink);
}

.sidebar__foot {
  border-block-start: 1px solid var(--rule);
  color: var(--ink-faint);
}

.signout {
  inline-size: 100%;
}

/* ==================================================================== topbar */

.topbar {
  background: var(--paper-raised);
  border-block-end: 1px solid var(--rule);
  gap: 0.6rem;
}

.topbar__toggle {
  border: 1px solid var(--rule);
  border-radius: var(--mx-radius);
  background: var(--paper-raised);
  color: var(--ink);
  padding: 0.3rem 0.6rem;
}

.crumbs {
  font-size: 0.84rem;
}

.crumbs__item:last-child {
  color: var(--ink);
}

.search__input,
.picker__input,
.field__input {
  font-size: 0.86rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--mx-radius);
  background-color: var(--paper-raised);
  color: var(--ink);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.search__input {
  padding-inline-start: 2.1rem;
  background: var(--mx-surface-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b80' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")
    no-repeat;
  background-size: 1rem;
  background-position: right 0.7rem center;
  border-color: transparent;
  inline-size: clamp(10rem, 22vw, 20rem);
}

html[dir='ltr'] .search__input {
  background-position: left 0.7rem center;
}

.search__input:hover {
  border-color: var(--rule-strong);
}

.search__input:focus-visible,
.picker__input:focus-visible,
.field__input:focus-visible {
  outline: none;
  border-color: var(--mx-primary);
  background-color: var(--paper-raised);
  box-shadow: 0 0 0 3px var(--mx-ring);
}

.picker__label {
  font-size: 0.74rem;
}

.whoami {
  border-inline-start: 1px solid var(--rule);
  padding-inline-start: 0.75rem;
}

.whoami__avatar {
  background: var(--mx-primary-soft);
  color: var(--mx-primary);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--mx-primary-tint);
}

.whoami__who {
  font-weight: 600;
}

.whoami__who small {
  font-weight: 400;
}

/* The theme switch feel.js adds to the topbar. */
.mx-theme {
  display: inline-grid;
  place-items: center;
  inline-size: 2.15rem;
  block-size: 2.15rem;
  flex: none;
  border: 1px solid var(--rule);
  border-radius: var(--mx-radius);
  background: var(--paper-raised);
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    background-color 120ms ease,
    transform 120ms var(--mx-ease);
}

.mx-theme:hover {
  background: var(--mx-surface-2);
  color: var(--ink);
}

.mx-theme:active {
  transform: scale(0.94);
}

.mx-theme svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
}

/* ====================================================================== page */

.page {
  max-inline-size: 1440px;
}

.page__head {
  align-items: center;
  margin-block-end: 1.4rem;
  padding-block-end: 1.1rem;
  border-block-end: 1px solid var(--rule);
}

.lede {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.7;
}

/*
 * A screen that has not drawn yet shows the MAPEX mark tracing itself. It
 * appears only after 180ms, so a screen that answers quickly never flashes it.
 */
.view:empty {
  display: grid;
  place-items: center;
  min-block-size: 55vh;
}

.view:empty::before {
  content: '';
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 12px;
  background: url('/brand/mark-loading.svg') center / contain no-repeat;
  box-shadow: 0 12px 32px -8px rgb(36 71 224 / 0.35);
  animation: mx-appear 220ms var(--mx-ease) 180ms both;
}

@keyframes mx-appear {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The first load: the mark alone on the page until the shell has drawn. */
.mx-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  background: var(--paper);
  transition:
    opacity 260ms ease,
    visibility 0s linear 260ms;
}

.mx-splash img {
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: 16px;
  box-shadow: 0 18px 40px -10px rgb(36 71 224 / 0.4);
}

.mx-splash.is-gone {
  opacity: 0;
  visibility: hidden;
}

/*
 * The full logo: the mark draws first, then the name writes itself out of it,
 * right to left the way the word is read, so the two land as one lockup.
 */
.mx-splash {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.95rem;
}

.mx-splash__name,
.view:empty::after {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1;
}

/* As in the MAPEX Hub logo: the name strong, «هوب» in the lighter weight. */
.mx-splash__name > span {
  font-weight: 400;
  color: var(--ink-soft);
}

.mx-splash__name {
  font-size: 2.1rem;
  white-space: nowrap;
  animation: mx-write 620ms var(--mx-ease) 620ms both;
}

@keyframes mx-write {
  from {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

html[dir='ltr'] .mx-splash__name {
  animation-name: mx-write-ltr;
}

@keyframes mx-write-ltr {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

/* The in-page loader carries the same lockup, smaller. */
.view:empty {
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
}

.view:empty::after {
  content: 'مابيكس هوب';
  font-size: 1.45rem;
  animation: mx-write 560ms var(--mx-ease) 760ms both;
}

@media (prefers-reduced-motion: reduce) {
  .mx-splash__name,
  .view:empty::after {
    animation: none;
  }
}

@keyframes mx-shimmer {
  0% {
    opacity: 1;
    background-position: -400px 0;
  }
  100% {
    opacity: 1;
    background-position: 400px 0;
  }
}

/* A fresh screen settles in rather than snapping. */
.view > :first-child {
  animation: mx-rise 220ms var(--mx-ease) both;
}

@keyframes mx-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===================================================================== cards */

.cards {
  gap: 0.75rem;
  background: none;
  border: 0;
}

.card {
  border: 1px solid var(--rule);
  border-radius: var(--mx-radius-lg);
  box-shadow: var(--mx-shadow-xs);
  padding: 1rem 1.15rem;
}

.card__label {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0;
}

.card__value {
  font-family: var(--mono);
  font-weight: 650;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
}

.band {
  background: var(--mx-primary-soft);
  color: var(--ink);
  border: 1px solid var(--mx-primary-tint);
  border-radius: var(--mx-radius-lg);
  margin-block-end: 0.75rem;
}

.band .card__label {
  color: var(--mx-primary);
  font-weight: 600;
}

.band .card__note {
  color: var(--ink-soft);
}

.meter {
  border-radius: 999px;
  background: var(--mx-surface-2);
}

.meter > span {
  border-radius: inherit;
  background: var(--mx-primary);
}

.plan-grid .is-current {
  background: var(--mx-primary-soft);
}

.checks {
  border-radius: var(--mx-radius);
}

/* ==================================================================== tables */

.toolbar {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-block-end: 0;
  border-start-start-radius: var(--mx-radius-lg);
  border-start-end-radius: var(--mx-radius-lg);
  padding: 0.85rem 1rem;
}

.field__label {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.scroll-x {
  border: 1px solid var(--rule);
  border-radius: var(--mx-radius-lg);
  background: var(--paper-raised);
  box-shadow: var(--mx-shadow-xs);
  /*
   * A table scrolls WITH the page, never in a frame of its own: a frame that
   * holds the scroll swallowed two-finger trackpad scrolling, so the page
   * looked stuck (owner, 22 Oct 2026). Sideways scrolling stays for narrow
   * screens; on a desktop the header sticks under the top bar instead.
   */
  overflow-x: auto;
}

@media (min-width: 1001px) {
  .scroll-x {
    overflow: visible;
  }

  .scroll-x .sheet thead th {
    inset-block-start: var(--topbar-h);
  }
}

.toolbar + .scroll-x {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

.scroll-x:has(+ .pager) {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.sheet {
  font-size: 0.87rem;
}

.sheet th,
.sheet td {
  padding: 0.62rem 0.9rem;
  border-block-end: 1px solid var(--rule);
}

.sheet thead th {
  background: var(--mx-head);
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  border-block-end: 1px solid var(--rule-strong);
  z-index: 1;
}

.sheet thead th button:hover {
  color: var(--mx-primary);
}

.sheet tbody tr {
  transition: background-color 80ms ease;
}

.sheet tbody tr:hover {
  background: var(--mx-primary-soft);
}

tr.is-clickable:active {
  background: var(--mx-primary-tint);
}

.sheet tfoot td {
  background: var(--mx-head);
  border-block-start: 1px solid var(--rule-strong);
  font-weight: 700;
}

.sheet caption {
  border-block-start: 1px solid var(--rule);
}

.num,
.card__value,
.sheet--form input.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum', 'cv11';
}

/* An identifier in Latin digits is monospaced; an Arabic word in the same cell keeps its joined script. */
.code {
  font-family: var(--mx-code), var(--sans);
  letter-spacing: 0;
  font-size: 0.84em;
  color: var(--ink-faint);
}

.pager {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-block-start: 0;
  border-end-start-radius: var(--mx-radius-lg);
  border-end-end-radius: var(--mx-radius-lg);
  padding: 0.6rem 1rem;
}

/* ==================================================================== states */

.flag {
  border: 0;
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  font-size: 0.74rem;
  font-weight: 600;
  background: color-mix(in oklab, currentColor 11%, transparent);
}

.tag {
  border-color: var(--rule);
  background: var(--paper-raised);
}

.tag--muted {
  background: var(--mx-surface-2);
  border-color: transparent;
}

.banner,
.notice,
.notice--warn,
.notice--good,
.notice-row,
.position__gap {
  border-width: 1px;
  border-inline-start-width: 1px;
  border-radius: 10px;
}

.banner {
  border: 1px solid color-mix(in oklab, var(--bad) 30%, var(--rule));
  background: color-mix(in oklab, var(--bad) 7%, var(--paper-raised));
}

.notice--warn {
  border-color: color-mix(in oklab, var(--warn) 40%, var(--rule));
  background: color-mix(in oklab, var(--warn) 7%, var(--paper-raised));
}

.state {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--mx-radius-lg);
  background: var(--paper-raised);
  padding: 2.75rem 1.5rem;
}

.state__title {
  font-size: 1rem;
  font-weight: 600;
}

.state__icon {
  opacity: 0.35;
}

.state--denied,
.state--error,
.state--absent {
  border-style: solid;
  border-inline-start-width: 1px;
}

.state--denied {
  border-color: color-mix(in oklab, var(--warn) 40%, var(--rule));
  background: color-mix(in oklab, var(--warn) 5%, var(--paper-raised));
}

.state--error {
  border-color: color-mix(in oklab, var(--bad) 40%, var(--rule));
  background: color-mix(in oklab, var(--bad) 5%, var(--paper-raised));
}

.state--absent {
  border-color: color-mix(in oklab, var(--absent) 40%, var(--rule));
  background: color-mix(in oklab, var(--absent) 5%, var(--paper-raised));
}

.skeleton__row {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--mx-surface-2) 25%,
    var(--paper-raised) 50%,
    var(--mx-surface-2) 75%
  );
  background-size: 200% 100%;
}

/* The company-setup checklist: a missing item is a row with a red flag, not a red rail. */
.setup__row--missing {
  border-inline-start: 0;
  padding-inline-start: 0;
}

/* A status pill keeps the width of its word inside a grid cell. */
.setup__what > .flag,
.setup__what > .tag {
  justify-self: start;
}

.sidebar__foot .btn {
  border-color: var(--rule);
}

.period,
.request,
.self-approval-dialog,
.role-inert {
  border-inline-start-width: 1px;
}

.period {
  border-radius: 10px;
  position: relative;
  padding-inline-start: 1.6rem;
}

.period::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.7rem;
  inset-block-start: 1rem;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: var(--ink-faint);
}

.period--open::before {
  background: var(--good);
}

.period--soft_closed::before {
  background: var(--gold);
}

.period--closed::before {
  background: var(--warn);
}

.period--locked::before {
  background: var(--bad);
}

.request {
  border-radius: var(--mx-radius-lg);
  border-color: color-mix(in oklab, var(--warn) 35%, var(--rule));
}

.tax-code,
.reg,
.position__card,
.detail,
.login,
.self-approval-dialog {
  border-radius: var(--mx-radius-lg);
}

.position__card {
  border: 1px solid var(--mx-primary-tint);
  background: var(--mx-primary-soft);
}

.tax-code__rate {
  color: var(--mx-primary);
}

.rate-history__item {
  border-radius: 6px;
}

/* ================================================================== controls */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  position: relative;
  min-block-size: 2.25rem;
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--mx-radius);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: var(--mx-shadow-xs);
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms var(--mx-ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn:hover,
.btn:focus-visible {
  background: var(--mx-surface-2);
  border-color: var(--rule-strong);
  color: var(--ink);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--mx-ring);
}

/* The press answers before the network does. */
.btn:active:not(:disabled),
.icon-btn:active:not(:disabled),
.topbar__toggle:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--mx-primary);
  border-color: var(--mx-primary);
  color: var(--mx-on-primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(36 71 224 / 0.25);
}

.btn--primary:hover:not(:disabled),
.btn--primary:focus-visible:not(:disabled) {
  background: var(--mx-primary-hover);
  border-color: var(--mx-primary-hover);
  color: var(--mx-on-primary);
}

.btn--primary:active:not(:disabled) {
  background: var(--mx-primary-press);
  border-color: var(--mx-primary-press);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink-soft);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--mx-surface-2);
  border-color: transparent;
  color: var(--ink);
}

.btn--danger {
  border-color: color-mix(in oklab, var(--bad) 40%, var(--rule));
  color: var(--bad);
}

.btn--danger:hover:not(:disabled),
.btn--danger:focus-visible:not(:disabled) {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}

.btn:disabled {
  opacity: 0.5;
  box-shadow: none;
}

/* Busy: the pressed button keeps its size and shows it is working. */
.btn[data-busy],
.btn[data-busy]:disabled {
  opacity: 1;
  color: transparent !important;
  cursor: progress;
}

.btn[data-busy]::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
  border-block-start-color: transparent;
  animation: mx-spin 600ms linear infinite;
}

.btn--primary[data-busy]::after {
  border-color: rgb(255 255 255 / 0.9);
  border-block-start-color: transparent;
}

@keyframes mx-spin {
  to {
    transform: rotate(360deg);
  }
}

.icon-btn {
  border-radius: var(--mx-radius);
  transition:
    background-color 120ms ease,
    color 120ms ease,
    transform 120ms var(--mx-ease);
}

.icon-btn:hover:not(:disabled),
.icon-btn:focus-visible:not(:disabled) {
  background: var(--mx-surface-2);
  border-color: transparent;
}

.detail {
  border: 1px solid var(--rule);
}

.scrim,
.self-approval-overlay {
  background: var(--mx-scrim);
}

.self-approval-dialog,
dialog {
  box-shadow: var(--mx-shadow-lg);
  border: 1px solid var(--rule);
}

dialog {
  border-radius: var(--mx-radius-lg);
  background: var(--paper-raised);
  color: var(--ink);
  padding: 1.25rem 1.4rem;
}

dialog::backdrop {
  background: var(--mx-scrim);
}

/* ===================================================================== forms */

.grid-fields > label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0;
}

.grid-fields input,
.grid-fields select,
.grid-fields textarea,
.sheet--form input,
.sheet--form select,
.dialog input,
.dialog textarea,
.decide__note textarea,
.self-approval-dialog textarea,
textarea {
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--mx-radius);
  padding: 0.5rem 0.7rem;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.grid-fields input:hover,
.grid-fields select:hover,
.sheet--form input:hover,
.sheet--form select:hover {
  border-color: var(--ink-faint);
}

.grid-fields input:focus-visible,
.grid-fields select:focus-visible,
.grid-fields textarea:focus-visible,
.sheet--form input:focus-visible,
.sheet--form select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--mx-primary);
  box-shadow: 0 0 0 3px var(--mx-ring);
}

.grid-fields input[readonly] {
  background: var(--mx-surface-2);
}

.grid-fields input::placeholder,
.search__input::placeholder,
textarea::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

input[aria-invalid='true'],
select[aria-invalid='true'] {
  border-color: var(--bad) !important;
}

/* ================================================== the top progress line */
/* Drawn by feel.js while a screen loads: the click is answered at once. */

.mx-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  z-index: 100;
  pointer-events: none;
  background: var(--mx-primary);
  transform-origin: right;
  transform: scaleX(0);
  opacity: 0;
}

html[dir='ltr'] .mx-progress {
  transform-origin: left;
}

.mx-progress.is-on {
  opacity: 1;
  transform: scaleX(0.8);
  transition:
    transform 2.4s cubic-bezier(0.1, 0.7, 0.2, 1),
    opacity 80ms linear;
}

.mx-progress.is-done {
  opacity: 0;
  transform: scaleX(1);
  transition:
    transform 160ms var(--mx-ease),
    opacity 260ms ease 140ms;
}

/* ================================================================ responsive */

@media (max-width: 1000px) {
  .sidebar {
    box-shadow: var(--mx-shadow-lg);
    transition: transform 220ms var(--mx-ease);
  }

  .search__input {
    inline-size: 9rem;
  }
}

@media (max-width: 620px) {
  /* On a phone a ledger scrolls sideways; its words do not stack letter by letter. */
  .sheet th,
  .sheet td {
    white-space: nowrap;
    padding: 0.55rem 0.75rem;
  }

  .scroll-x {
    max-block-size: none;
  }

  .search__input {
    inline-size: 7.5rem;
  }

  .page__head {
    align-items: flex-start;
  }
}

/* ===================================================================== print */

@media print {
  :root {
    --ink: #000;
    --paper: #fff;
    --paper-raised: #fff;
  }

  .mx-progress,
  .mx-theme {
    display: none !important;
  }

  .scroll-x {
    max-block-size: none;
    overflow: visible;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view:empty::before,
  .view:empty::after,
  .view > :first-child,
  .btn[data-busy]::after {
    animation-duration: 0.001ms !important;
  }

  .btn,
  .nav__heading,
  .nav__link,
  .mx-progress.is-on,
  .mx-progress.is-done {
    transition: none !important;
  }

  .btn[data-busy]::after {
    animation: none;
    border-block-start-color: var(--ink-faint);
  }
}

/* ================================================== quick jump (palette.js) */

.mx-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  block-size: 2.15rem;
  padding-inline: 0.7rem 0.45rem;
  border: 1px solid var(--rule);
  border-radius: var(--mx-radius);
  background: var(--paper-raised);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 120ms ease,
    transform 120ms var(--mx-ease);
}

.mx-jump:hover {
  background: var(--mx-surface-2);
  color: var(--ink);
}

.mx-jump:active {
  transform: scale(0.97);
}

kbd {
  font-family: var(--sans);
  font-size: 0.72rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--rule);
  border-block-end-width: 2px;
  border-radius: 5px;
  background: var(--mx-surface-2);
  color: var(--ink-soft);
  direction: ltr;
  unicode-bidi: isolate;
}

.mx-palette {
  inline-size: min(38rem, calc(100vw - 2rem));
  max-block-size: min(32rem, calc(100dvh - 6rem));
  margin-block-start: 12vh;
  padding: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
}

.mx-palette[open] {
  display: flex;
}

.mx-palette::backdrop {
  background: var(--mx-scrim);
}

.mx-palette__field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-block-end: 1px solid var(--rule);
  color: var(--ink-faint);
}

.mx-palette__field svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: none;
}

.mx-palette__field input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.mx-palette__list {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mx-palette__list [role='option'] {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--mx-radius);
  cursor: pointer;
  color: var(--ink);
}

.mx-palette__list [aria-selected='true'] {
  background: var(--mx-primary-soft);
  color: var(--mx-primary);
}

.mx-palette__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  border-radius: 8px;
  background: var(--mx-surface-2);
  color: var(--ink-soft);
  flex: none;
}

.mx-palette__icon svg {
  inline-size: 1rem;
  block-size: 1rem;
}

[aria-selected='true'] .mx-palette__icon {
  background: var(--paper-raised);
  color: var(--mx-primary);
}

.mx-palette__label {
  flex: 1;
  font-weight: 500;
}

.mx-palette__group {
  font-size: 0.76rem;
  color: var(--ink-faint);
}

.mx-palette__empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--ink-soft);
}

.mx-palette__foot {
  margin: 0;
  padding: 0.55rem 1rem;
  border-block-start: 1px solid var(--rule);
  font-size: 0.75rem;
  color: var(--ink-faint);
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

@media (max-width: 620px) {
  .mx-jump span {
    display: none;
  }
}

.is-signed-out .mx-jump {
  display: none;
}

/* ===================================================================== */
/* E-invoicing (ZATCA phase 2, T2.9): overview, wizard, devices.         */
/* Tokens only, logical properties only, one column at 375px.            */
/* ===================================================================== */

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.einv-help {
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.einv-help:hover {
  color: var(--mx-primary);
}

.einv-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.15rem;
  margin-block-end: 1.2rem;
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--info);
  border-radius: var(--mx-radius);
  background: var(--paper-raised);
}

.einv-next--good {
  border-inline-start-color: var(--good);
}

.einv-next--warn {
  border-inline-start-color: var(--warn);
}

.einv-next__text {
  margin: 0;
  font-weight: 600;
}

.einv-small {
  font-size: 0.95rem;
}

/* --- the stepper ------------------------------------------------------- */

.einv-steps {
  list-style: none;
  margin: 0 0 0.35rem;
  padding: 0;
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.einv-steps__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.35rem 0.65rem 0.35rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--ink-faint);
  background: var(--paper-raised);
}

.einv-steps__n {
  display: inline-grid;
  place-items: center;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  border-radius: 50%;
  background: var(--mx-surface-2);
  font-size: 0.75rem;
  font-weight: 700;
}

.einv-steps__item.is-done {
  color: var(--good);
}

.einv-steps__item.is-done .einv-steps__n {
  background: color-mix(in oklab, var(--good) 14%, transparent);
}

.einv-steps__item.is-current {
  color: var(--mx-primary);
  border-color: var(--mx-primary);
  background: var(--mx-primary-soft);
  font-weight: 600;
}

.einv-steps__item.is-current .einv-steps__n {
  background: var(--mx-primary);
  color: var(--mx-on-primary);
}

.einv-steps__where {
  margin: 0 0 1rem;
  font-size: 0.8rem;
}

.einv-step__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.einv-step__head h2 {
  margin: 0;
}

.einv-step__lede {
  color: var(--ink-soft);
  margin-block: 0.4rem 1rem;
}

.einv-nav {
  margin-block-start: 1.2rem;
}

/* --- check lines (step 1) --------------------------------------------- */

.einv-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.einv-check {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.25rem 0.6rem;
  align-items: start;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: var(--mx-radius);
  background: var(--paper-raised);
}

.einv-check__icon {
  font-weight: 700;
  text-align: center;
}

.einv-check--bad .einv-check__icon {
  color: var(--bad);
}

.einv-check--warn .einv-check__icon {
  color: var(--warn);
}

.einv-check__acts {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.btn--sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.82rem;
}

.einv-ok {
  color: var(--good);
  font-weight: 600;
}

.einv-bad {
  color: var(--bad);
  font-weight: 600;
}

/* --- choices (environment, devices, mode) ------------------------------ */

.einv-choices {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.einv-choice {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: var(--mx-radius);
  background: var(--paper-raised);
  cursor: pointer;
}

.einv-choice:has(input:checked) {
  border-color: var(--mx-primary);
  background: var(--mx-primary-soft);
}

.einv-choice.is-linked {
  cursor: default;
  opacity: 0.8;
}

.einv-choice input {
  margin-block-start: 0.25rem;
  flex: 0 0 auto;
}

.einv-choice > span {
  display: grid;
  gap: 0.15rem;
}

.einv-tick {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  line-height: 1.7;
}

.einv-tick input {
  margin-block-start: 0.35rem;
  flex: 0 0 auto;
}

/* --- the code fields (step 5, renew) ------------------------------------ */

.einv-otp-row {
  display: grid;
  gap: 0.3rem;
  margin-block-end: 0.8rem;
  font-weight: 600;
}

.einv-otp {
  inline-size: 100%;
  max-inline-size: 12rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--mx-radius);
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.35em;
  text-align: center;
}

.einv-otp:focus-visible {
  outline: 3px solid var(--mx-ring);
  outline-offset: 1px;
  border-color: var(--mx-primary);
}

/* --- progress (step 6) -------------------------------------------------- */

.einv-run {
  padding: 0.9rem 1rem;
  margin-block: 0.8rem;
  border: 1px solid var(--rule);
  border-radius: var(--mx-radius-lg);
  background: var(--paper-raised);
}

.einv-run__head,
.einv-device__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-end: 0.6rem;
}

.einv-lines,
.einv-docs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.einv-docs {
  grid-column: 1 / -1;
  margin-block: 0.35rem 0.2rem;
  padding-inline-start: 2rem;
}

.einv-line {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.6rem;
  align-items: center;
}

.einv-doc {
  display: grid;
  grid-template-columns: 1.4rem 1fr auto;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.88rem;
}

.einv-doc__n {
  display: inline-grid;
  place-items: center;
  inline-size: 1.3rem;
  block-size: 1.3rem;
  border-radius: 50%;
  background: var(--mx-surface-2);
  font-size: 0.72rem;
  font-weight: 700;
}

.einv-line__icon {
  display: inline-grid;
  place-items: center;
  font-weight: 700;
}

.einv-line--done {
  color: var(--good);
}

.einv-line--done .einv-line__text,
.einv-line--wait .einv-line__text {
  color: var(--ink);
}

.einv-line--failed {
  color: var(--bad);
}

.einv-line--wait {
  color: var(--ink-faint);
}

.einv-line--now .einv-line__text {
  font-weight: 600;
}

.einv-doc__state {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.einv-spin {
  display: inline-block;
  inline-size: 0.95rem;
  block-size: 0.95rem;
  border: 2px solid var(--rule-strong);
  border-block-start-color: var(--mx-primary);
  border-radius: 50%;
  animation: mx-spin 0.8s linear infinite;
  vertical-align: -0.15em;
}

.einv-live {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .einv-spin {
    animation-duration: 2.4s;
  }
}

.einv-done {
  font-size: 1.3rem;
}

.einv-done__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.einv-done__list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* --- devices ---------------------------------------------------------- */

.einv-devices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0.9rem;
}

.einv-device {
  padding: 0.95rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--mx-radius-lg);
  background: var(--paper-raised);
}

.einv-device__name {
  font-size: 1rem;
}

.einv-device__meta {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
}

.einv-device__meta > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.einv-device__meta dt {
  color: var(--ink-soft);
}

.einv-device__meta dd {
  margin: 0;
  text-align: end;
}

.einv-danger {
  color: var(--bad);
}

.einv-error p,
.einv-stepup p {
  margin: 0 0 0.35rem;
}

@media (max-width: 600px) {
  .einv-steps__item:not(.is-current) .einv-steps__name {
    display: none;
  }

  .einv-step__head {
    flex-wrap: wrap;
  }

  .einv-nav .btn {
    flex: 1 1 auto;
  }
}

/* ===================================================== collapsible sidebar */
/*
 * Folded (feel.js `data-nav="collapsed"`), the menu is a 4.25rem rail of
 * section icons. Names live in tooltips; the screens under a section show
 * when the reader opens the menu again. Desktop only: phones use the drawer.
 */

.mx-fold {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin-inline-start: auto;
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--mx-radius);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    transform 160ms var(--mx-ease);
}

.mx-fold:hover {
  background: var(--mx-surface-2);
  color: var(--ink);
}

.mx-fold:active {
  transform: scale(0.94);
}

.mx-fold svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

/* The arrow points where the rail will go: toward the content when open. */
html[dir='ltr'] .mx-fold svg {
  transform: scaleX(-1);
}

@media (min-width: 1001px) {
  .app {
    transition: grid-template-columns 200ms var(--mx-ease);
  }

  :root[data-nav='collapsed'] {
    --sidebar-w: 4.25rem;
  }

  :root[data-nav='collapsed'] .mx-fold svg {
    transform: scaleX(-1);
  }

  html[dir='ltr'][data-nav='collapsed'] .mx-fold svg {
    transform: none;
  }

  :root[data-nav='collapsed'] .sidebar__brand {
    flex-direction: column;
    gap: 0.6rem;
    padding-inline: 0;
    align-items: center;
  }

  :root[data-nav='collapsed'] .mx-fold {
    margin-inline-start: 0;
  }

  :root[data-nav='collapsed'] .sidebar__name,
  :root[data-nav='collapsed'] .nav__list,
  :root[data-nav='collapsed'] .nav__chevron,
  :root[data-nav='collapsed'] .nav__label,
  :root[data-nav='collapsed'] .nav__dot,
  :root[data-nav='collapsed'] .sidebar__foot {
    display: none;
  }

  /* A top-level link's name is a bare text node: folded, only its icon shows. */
  :root[data-nav='collapsed'] .nav__heading,
  :root[data-nav='collapsed'] .nav__link {
    justify-content: center;
    margin-inline: 0.55rem;
    padding-inline: 0;
    font-size: 0;
    gap: 0;
  }

  :root[data-nav='collapsed'] .nav__icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  /* The section holding the current screen keeps its mark while folded. */
  :root[data-nav='collapsed'] .nav__section--current > .nav__heading {
    background: var(--mx-primary-soft);
  }

  :root[data-nav='collapsed'] .nav__section--current > .nav__heading .nav__icon {
    color: var(--mx-primary);
  }
}

@media (max-width: 1000px) {
  .mx-fold {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app {
    transition: none;
  }
}