@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald.ttf') format('truetype');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg-page:#efe6d7 !important;
  --bg-shell:#e4d6bd !important;
  --surface-0:#fffefb !important;
  --surface-1:#fbf7ef !important;
  --surface-2:#f4ecdd !important;
  --surface-3:#ece0cb !important;
  --surface-raised:#fffefb !important;
  --surface-active:#f9d9d2 !important;
  --text-primary:#251714 !important;
  --text-muted:#5a4636 !important;
  --text-dim:#655039 !important;
  --border-subtle:rgba(50,34,26,.13) !important;
  --border-default:rgba(50,34,26,.20) !important;
  --border-strong:rgba(37,23,20,.34) !important;
  --primary:#790909 !important;
  --primary-hover:#920b0b !important;
  --primary-pressed:#520606 !important;
  --on-primary:#f7f3ea !important;
  --success:#137a42 !important;
  --warning:#8a520b !important;
  --danger:#c81509 !important;
  --info:#1668b8 !important;
  --focus-ring:#790909 !important;
  --rail-width:236px !important;
  --topbar-height:56px !important;
  --rail-surface:#201b19 !important;
  --rail-surface-raised:#2a2320 !important;
  --rail-text:#f7f3ea !important;
  --rail-muted:#c9b79f !important;
  --nav-active:#790909 !important;
  --nav-active-hover:#920b0b !important;
  --nav-active-text:#f7f3ea !important;
  --nav-active-edge:#e7a19a !important;
  --breadcrumb-marker:#790909 !important;
  --mechanical-accent:#790909 !important;
  --motion-fast:120ms !important;
  --motion-base:180ms !important;
  --motion-slow:240ms !important;
  --ease-standard:cubic-bezier(.2,.8,.2,1) !important;
  --radius-sm:4px !important;
  --radius-md:6px !important;
  --radius-lg:10px !important;
  --radius-full:999px !important;
  --font-display:'Oswald','Arial Narrow',sans-serif !important;
  --font-ui:'Manrope','Inter',system-ui,sans-serif !important;
  --font-mono:'JetBrains Mono',ui-monospace,monospace !important;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-page:#171514 !important;
  --bg-shell:#1f1b19 !important;
  --surface-0:#24211f !important;
  --surface-1:#2b2724 !important;
  --surface-2:#322d2a !important;
  --surface-3:#3a342f !important;
  --surface-raised:#2b2724 !important;
  --surface-active:rgba(255,42,29,.14) !important;
  --text-primary:#f7f3ea !important;
  --text-muted:#c9b79f !important;
  --text-dim:#a79d8f !important;
  --border-subtle:rgba(247,243,234,.08) !important;
  --border-default:rgba(247,243,234,.14) !important;
  --border-strong:rgba(247,243,234,.28) !important;
  --primary:#ff5a4a !important;
  --primary-hover:#ff7a6a !important;
  --primary-pressed:#ff2a1d !important;
  --on-primary:#171514 !important;
  --success:#4ade80 !important;
  --warning:#f5a524 !important;
  --danger:#ff6b5d !important;
  --info:#60a5fa !important;
  --focus-ring:#ff7a6a !important;
  --rail-surface:#171514 !important;
  --rail-surface-raised:#24211f !important;
  --rail-text:#f7f3ea !important;
  --rail-muted:#c9b79f !important;
  --nav-active:#98221b !important;
  --nav-active-hover:#b92d24 !important;
  --nav-active-text:#fff7f2 !important;
  --nav-active-edge:#ff9b8f !important;
  --breadcrumb-marker:#ff7a6a !important;
  --mechanical-accent:#ff7a6a !important;
}

/*
 * Transitional aliases keep current screens readable while TSK-002 migrates
 * their consumers to semantic roles. They intentionally resolve to flat
 * surfaces and colors: no false font family, glass, gradient, or LED token.
 */
:root,
:root[data-theme="dark"] {
  --ink:var(--text-primary) !important;
  --fg:var(--text-primary) !important;
  --fg-muted:var(--text-muted) !important;
  --fg-dim:var(--text-dim) !important;
  --accent:var(--primary) !important;
  --accent-hover:var(--primary-hover) !important;
  --accent-dark:var(--primary-pressed) !important;
  --accent-text:var(--on-primary) !important;
  --status-text:var(--on-primary) !important;
  --success-text:var(--success) !important;
  --error:var(--danger) !important;
  --border:var(--border-default) !important;
  --border-2:var(--border-subtle) !important;
  --r-sm:var(--radius-sm) !important;
  --r-md:var(--radius-md) !important;
  --r-lg:var(--radius-lg) !important;
  --bg:var(--bg-shell) !important;
  --bg-2:var(--bg-shell) !important;
  --bg-deep:var(--bg-page) !important;
  --card:var(--surface-0) !important;
  --surface:var(--surface-0) !important;
  --surface-hover:var(--surface-1) !important;
  --surface-highlight:var(--surface-2) !important;
  --surface-deeper:var(--surface-1) !important;
  --surface-glass:var(--surface-0) !important;
  --surface-panel:var(--surface-0) !important;
  --surface-shell:var(--bg-shell) !important;
  --surface-row:var(--surface-1) !important;
  --surface-table:var(--surface-0) !important;
  --text:var(--text-primary) !important;
  --text-2:var(--text-muted) !important;
  --text-3:var(--text-dim) !important;
  --muted:var(--text-muted) !important;
  --ghost:var(--text-dim) !important;
  --primary-grad:var(--primary) !important;
  --primary-glow:color-mix(in srgb, var(--primary) 16%, transparent) !important;
  --accent-red:var(--primary) !important;
  --accent-dark-red:var(--primary-pressed) !important;
  --accent-grad:var(--primary) !important;
  --accent-glow:color-mix(in srgb, var(--primary) 16%, transparent) !important;
  --accent-weak:color-mix(in srgb, var(--primary) 14%, transparent) !important;
  --on-accent-weak:var(--primary) !important;
  --border-hover:var(--border-strong) !important;
  --success-bg:color-mix(in srgb, var(--success) 12%, transparent) !important;
  --success-border:color-mix(in srgb, var(--success) 24%, transparent) !important;
  --warning-bg:color-mix(in srgb, var(--warning) 14%, transparent) !important;
  --warning-border:color-mix(in srgb, var(--warning) 26%, transparent) !important;
  --error-bg:color-mix(in srgb, var(--danger) 12%, transparent) !important;
  --error-border:color-mix(in srgb, var(--danger) 24%, transparent) !important;
  --info-bg:color-mix(in srgb, var(--info) 12%, transparent) !important;
  --info-border:color-mix(in srgb, var(--info) 24%, transparent) !important;
  --ok:var(--success) !important;
  --warn:var(--warning) !important;
  --err:var(--danger) !important;
  --ok-dot:var(--success) !important;
  --warn-dot:var(--warning) !important;
  --err-dot:var(--danger) !important;
  --info-dot:var(--info) !important;
  --ok-t:var(--success) !important;
  --warn-t:var(--warning) !important;
  --err-t:var(--danger) !important;
  --info-t:var(--info) !important;
  --ok-bg:var(--success-bg) !important;
  --warn-bg:var(--warning-bg) !important;
  --err-bg:var(--error-bg) !important;
  --neutral-bg:var(--surface-1) !important;
  --neutral-dot:var(--text-dim) !important;
  --neutral-t:var(--text-muted) !important;
  --selected:var(--surface-active) !important;
  --hover:var(--surface-2) !important;
  --row-accent:var(--surface-active) !important;
  --shadow:0 10px 28px color-mix(in srgb, var(--text-primary) 14%, transparent) !important;
  --shadow-red:0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent) !important;
  --shadow-accent:0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent) !important;
  --shadow-card:0 1px 0 color-mix(in srgb, var(--text-primary) 12%, transparent) !important;
  --shadow-pop:0 14px 34px color-mix(in srgb, var(--text-primary) 22%, transparent) !important;
  --radius-xs:var(--radius-sm) !important;
  --font-sans:var(--font-ui) !important;
  --default-font-family:var(--font-ui) !important;
  --default-mono-font-family:var(--font-mono) !important;
}

html,
body {
  background:var(--bg-page) !important;
  color:var(--ink) !important;
}

body,
button,
input,
select,
textarea {
  font-family:var(--font-ui) !important;
}

code,
pre,
.font-mono,
.mono {
  font-family:var(--font-mono) !important;
}

/*
 * Canonical application primitives. The reference fixture under
 * tests/fixtures exercises these classes before each dependent surface adopts
 * them. They are intentionally compact, semantic, and data-first.
 */
.ar-skip-link {
  position:absolute;
  inset-block-start:8px;
  inset-inline-start:8px;
  z-index:100;
  padding:8px 12px;
  border-radius:var(--radius-md);
  background:var(--primary);
  color:var(--on-primary);
  text-decoration:none;
  transform:translateY(-160%);
}

.ar-skip-link:focus-visible {
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
  transform:translateY(0);
}

.ar-shell {
  display:grid;
  grid-template-columns:var(--rail-width) minmax(0, 1fr);
  min-height:100dvh;
  background:var(--bg-page);
  color:var(--text-primary);
}

.ar-rail {
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:16px;
  padding:16px 12px;
  background:var(--rail-surface);
  border-inline-end:1px solid color-mix(in srgb, var(--rail-text) 12%, transparent);
  color:var(--rail-text);
}

.ar-rail__brand {
  display:flex;
  min-height:var(--topbar-height);
  height:var(--topbar-height);
  box-sizing:border-box;
  align-items:center;
  gap:10px;
  padding:0 8px;
}

.ar-rail__mark,
.ar-panel__icon {
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border-radius:var(--radius-sm);
}

.ar-panel__icon {
  border:1px solid color-mix(in srgb, var(--mechanical-accent) 58%, transparent);
  background:color-mix(in srgb, var(--mechanical-accent) 13%, transparent);
  color:var(--mechanical-accent);
}

.ar-rail__mark {
  border:1px solid var(--nav-active-edge);
  background:var(--nav-active);
  color:var(--nav-active-text);
}

.ar-rail__wordmark {
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  letter-spacing:.03em;
  line-height:1;
  text-transform:uppercase;
}

.ar-rail__caption,
.ar-nav-group__label,
.ar-kpi__label,
.ar-breadcrumb {
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.3;
  text-transform:uppercase;
}

.ar-rail__caption,
.ar-nav-group__label {
  color:var(--rail-muted);
}

.ar-nav {
  display:grid;
  gap:12px;
}

.ar-nav-group {
  display:grid;
  gap:4px;
}

.ar-nav-group__label {
  margin:0;
  padding:0 8px 4px;
}

.ar-nav-link {
  display:flex;
  min-height:44px;
  align-items:center;
  gap:10px;
  padding:8px;
  border:1px solid transparent;
  border-radius:var(--radius-md);
  color:var(--rail-muted);
  font:600 13px/1.2 var(--font-ui);
  text-decoration:none;
  transition:background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.ar-nav-link:hover {
  background:var(--rail-surface-raised);
  border-color:color-mix(in srgb, var(--rail-text) 14%, transparent);
  color:var(--rail-text);
}

.ar-nav-link[aria-current="page"] {
  background:var(--nav-active);
  border-color:var(--nav-active-edge);
  color:var(--nav-active-text);
}

.ar-nav-link:focus-visible,
.ar-button:focus-visible,
.ar-field:focus-visible,
.ar-theme-toggle:focus-visible {
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}

.ar-workspace {
  min-width:0;
  padding:24px;
}

.ar-topbar {
  display:flex;
  min-height:var(--topbar-height);
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--border-default);
}

.ar-topbar__identity {
  display:grid;
  min-width:0;
  gap:5px;
}

.ar-breadcrumb {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-muted);
}

.ar-breadcrumb::before {
  width:6px;
  height:6px;
  flex:0 0 6px;
  background:var(--breadcrumb-marker);
  content:"";
  transform:rotate(45deg);
}

.ar-page-title {
  display:flex;
  margin:0;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:clamp(22px, 2vw, 28px);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1;
  text-wrap:balance;
  text-transform:uppercase;
}

.ar-page-title__mark {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
}

.ar-page-title__icon {
  display:block;
  width:28px;
  height:28px;
}

.ar-topbar__actions,
.ar-panel__actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.ar-content {
  display:grid;
  max-width:1480px;
  gap:16px;
  padding-block-start:20px;
}

.ar-panel {
  min-width:0;
  padding:16px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:var(--surface-raised);
}

.ar-panel__header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-block-end:16px;
}

.ar-panel__title {
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
}

.ar-panel__title h2,
.ar-panel__title h3 {
  margin:0;
  font-size:16px;
  line-height:1.25;
}

.ar-panel__title p {
  margin:4px 0 0;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.45;
}

.ar-kpi-strip {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(152px, 1fr));
  overflow:hidden;
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:var(--surface-raised);
}

.ar-kpi {
  display:grid;
  min-width:0;
  gap:4px;
  padding:14px 16px;
}

.ar-kpi + .ar-kpi {
  border-inline-start:1px solid var(--border-subtle);
}

.ar-kpi__label {
  color:var(--text-muted);
}

.ar-kpi__value {
  font-family:var(--font-mono);
  font-size:20px;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  line-height:1.2;
}

.ar-kpi__note {
  color:var(--text-muted);
  font-size:12px;
  line-height:1.4;
}

.ar-button {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  background:var(--surface-1);
  color:var(--text-primary);
  cursor:pointer;
  font:700 13px/1.2 var(--font-ui);
  text-decoration:none;
  transition:background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.ar-button:hover:not(:disabled) {
  border-color:var(--border-strong);
  background:var(--surface-2);
}

.ar-button:active:not(:disabled) {
  background:var(--surface-3);
}

.ar-button:disabled {
  cursor:not-allowed;
  opacity:.58;
}

.ar-button[aria-busy="true"] {
  cursor:progress;
}

.ar-button--primary {
  border-color:var(--primary);
  background:var(--primary);
  color:var(--on-primary);
}

.ar-button--primary:hover:not(:disabled) {
  border-color:var(--primary-hover);
  background:var(--primary-hover);
}

.ar-button--primary:active:not(:disabled) {
  border-color:var(--primary-pressed);
  background:var(--primary-pressed);
}

.ar-button--danger {
  border-color:var(--danger);
  background:var(--danger);
  color:var(--on-primary);
}

.ar-field {
  width:100%;
  min-height:44px;
  padding:8px 10px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  background:var(--surface-0);
  color:var(--text-primary);
  font:500 14px/1.3 var(--font-ui);
}

.ar-field::placeholder {
  color:var(--text-dim);
  opacity:1;
}

.ar-field[aria-invalid="true"] {
  border-color:var(--danger);
}

.ar-feedback,
.ar-state {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  background:var(--surface-1);
  color:var(--text-primary);
  font-size:13px;
  line-height:1.45;
}

.ar-feedback[data-tone="success"] {
  border-color:var(--success-border);
  background:var(--success-bg);
}

.ar-feedback[data-tone="error"] {
  border-color:var(--error-border);
  background:var(--error-bg);
}

.ar-feedback[data-tone="warning"] {
  border-color:var(--warning-border);
  background:var(--warning-bg);
}

.ar-state {
  display:grid;
  justify-items:start;
  min-height:132px;
  align-content:center;
}

.ar-state h2,
.ar-state p {
  margin:0;
}

.ar-state p {
  color:var(--text-muted);
}

.ar-skeleton {
  width:min(100%, 280px);
  height:12px;
  border-radius:var(--radius-sm);
  background:var(--surface-3);
}

@media (pointer:coarse) {
  .ar-button,
  .ar-nav-link,
  .ar-field {
    min-height:44px;
  }
}

@media (max-width:900px) {
  .ar-shell {
    grid-template-columns:minmax(0, 1fr);
  }

  .ar-rail {
    gap:10px;
    border-inline-end:0;
    border-block-end:1px solid color-mix(in srgb, var(--rail-text) 12%, transparent);
  }

  .ar-nav {
    grid-template-columns:repeat(auto-fit, minmax(152px, 1fr));
    gap:8px;
  }

  .ar-nav-group {
    min-width:0;
  }
}

@media (max-width:640px) {
  .ar-workspace {
    padding:12px;
  }

  .ar-topbar {
    align-items:flex-start;
    flex-direction:column;
  }

  .ar-topbar__actions {
    width:100%;
  }

  .ar-topbar__actions .ar-button {
    flex:1 1 auto;
  }

  .ar-kpi {
    padding:12px;
  }

  .ar-kpi + .ar-kpi {
    border-inline-start:0;
    border-block-start:1px solid var(--border-subtle);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* Нативный контрол шапки (перенесён из плавающей пилюли bottom-right в
   header/topbar каждого экрана). Токены --ink/--surface-1/--border
   инвертируются по теме -> контрол ВСЕГДА контрастен фону в обеих темах. */
.ar-theme-toggle {
  position:static;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 12px;
  min-height:32px;
  flex-shrink:0;
  white-space:nowrap;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-1);
  color:var(--ink);
  box-shadow:none;
  cursor:pointer;
  font:700 12px/1 var(--font-ui);
  letter-spacing:.04em;
  text-transform:uppercase;
  touch-action:manipulation;
}

/* лейбл для узнаваемости: HTML содержит только «◐», добавляем подпись.
   Скрывается на узких вьюпортах, чтобы не ломать компактные шапки. */
.ar-theme-toggle::after {
  content:"Тема";
}

@media (max-width:640px) {
  .ar-theme-toggle {
    padding:6px 9px;
  }
  .ar-theme-toggle::after {
    display:none;
  }
}

.ar-theme-toggle:hover {
  background:var(--accent);
  color:var(--accent-text);
  border-color:var(--accent);
}

.ar-theme-toggle:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Корневой слот для login-экрана: там нет топбара/навигации, поэтому
   контрол крепится в top-right угол вьюпорта — визуальный эквивалент шапки. */
.ar-login-theme-slot {
  position:absolute;
  top:20px;
  right:20px;
  z-index:20;
}

@media (max-width:640px) {
  .ar-login-theme-slot {
    top:14px;
    right:14px;
  }
}

/* ponytail: no-build Tailwind overrides; arbitrary class strings stay unchanged because CSS is precompiled. */
:root:not([data-theme="dark"]) .text-white,
:root:not([data-theme="dark"]) [class*="text-white"] {
  color:var(--ink) !important;
}

:root:not([data-theme="dark"]) .text-white\/20,
:root:not([data-theme="dark"]) .text-white\/25,
:root:not([data-theme="dark"]) .text-white\/30,
:root:not([data-theme="dark"]) .text-white\/40,
:root:not([data-theme="dark"]) .text-white\/50,
:root:not([data-theme="dark"]) .text-white\/60,
:root:not([data-theme="dark"]) .text-white\/70,
:root:not([data-theme="dark"]) .text-white\/80 {
  color:var(--fg-muted) !important;
}

:root:not([data-theme="dark"]) .text-muted,
:root:not([data-theme="dark"]) .muted-line,
:root:not([data-theme="dark"]) small {
  color:var(--fg-muted) !important;
}

:root:not([data-theme="dark"]) [class*="text-[#FF4953]"],
:root:not([data-theme="dark"]) [class*="text-[#FF5040]"],
:root:not([data-theme="dark"]) [class*="text-[#FFB4B4]"],
:root:not([data-theme="dark"]) [class*="hover:text-[#ff6b73]"],
:root:not([data-theme="dark"]) [class*="hover:text-red"] {
  color:var(--error) !important;
}

:root:not([data-theme="dark"]) [class*="text-[#00A054]"],
:root:not([data-theme="dark"]) .text-green-300,
:root:not([data-theme="dark"]) .text-green-400 {
  color:var(--success-text) !important;
}

:root:not([data-theme="dark"]) .text-yellow-300,
:root:not([data-theme="dark"]) .text-yellow-400,
:root:not([data-theme="dark"]) .text-amber-400 {
  color:var(--warning) !important;
}

:root:not([data-theme="dark"]) .text-blue-300,
:root:not([data-theme="dark"]) .text-blue-400,
:root:not([data-theme="dark"]) .text-purple-300,
:root:not([data-theme="dark"]) .text-purple-400 {
  color:var(--info) !important;
}

:root:not([data-theme="dark"]) [class*="bg-[#050505]"] {
  background-color:var(--surface-0) !important;
}

:root:not([data-theme="dark"]) [class*="bg-[rgba(255,255,255"] {
  background-color:var(--surface-1) !important;
}

:root:not([data-theme="dark"]) [class*="border-[rgba(255,255,255"] {
  border-color:var(--border) !important;
}

:root:not([data-theme="dark"]) [class*="bg-[rgba(217,32,32"],
:root:not([data-theme="dark"]) [class*="bg-[rgba(255,73,83"] {
  background-color:var(--error-bg) !important;
}

:root:not([data-theme="dark"]) [class*="bg-[rgba(0,160,84"] {
  background-color:var(--success-bg) !important;
}

:root:not([data-theme="dark"]) [class*="bg-[rgba(245,158,11"],
:root:not([data-theme="dark"]) [class*="bg-[rgba(250,204,21"] {
  background-color:var(--warning-bg) !important;
}

:root:not([data-theme="dark"]) [class*="border-[#D92020]"],
:root:not([data-theme="dark"]) [class*="border-[#FF4953]"],
:root:not([data-theme="dark"]) [class*="border-[rgba(255,73,83"] {
  border-color:var(--danger) !important;
}

:root:not([data-theme="dark"]) [class*="border-[#00A054]"] {
  border-color:var(--success) !important;
}

:root:not([data-theme="dark"]) [class*="border-amber-500"] {
  border-color:var(--warning) !important;
}

:root:not([data-theme="dark"]) [class*="border-red-400"] {
  border-color:var(--danger) !important;
}

:root:not([data-theme="dark"]) [class*="border-b-2"][class*="border-[#D92020]"] {
  border-bottom-color:var(--accent) !important;
}

:root:not([data-theme="dark"]) [class*="accent-[#D92020]"] {
  accent-color:var(--accent) !important;
}

:root:not([data-theme="dark"]) [class*="shadow-[0_0_10px_rgba(217,32,32"] {
  box-shadow:0 0 0 1px color-mix(in srgb, var(--mechanical-accent) 45%, transparent) !important;
}

/* Brand logo artwork ships in two variants: the original is white/red on
   transparent (needs a dark canvas), "-light" is the same art recolored dark
   ink/red for the cream light theme. Each page renders both <img> tags
   tagged data-ar-logo-variant; this shows only the one matching data-theme,
   so no JS is needed to react to theme toggles. */
[data-ar-logo-variant] {
  display:none;
}

:root[data-theme="dark"] [data-ar-logo-variant="dark"] {
  display:inline-block;
}

:root:not([data-theme="dark"]) [data-ar-logo-variant="light"] {
  display:inline-block;
}

/* Main operational surfaces reuse the Factory contract without replacing their
   existing controls, event handlers, role gates, or confirmation flows. */
.factory-operational-view {
  display:grid;
  gap:var(--space-4);
  min-width:0;
}

.factory-operational-view .panel {
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:var(--surface-raised);
  box-shadow:var(--shadow-panel);
}

.factory-operational-view .title {
  color:var(--text-primary);
  letter-spacing:-.02em;
}

.factory-operational-view .subtitle,
.factory-operational-view .max-muted,
.factory-operational-view .accounts-audit-sub {
  color:var(--text-muted);
}

.factory-operational-view :is(.btn-primary, .btn-secondary, .btn-accent) {
  min-height:44px;
  border-radius:var(--radius-md);
  font:700 13px/1.2 var(--font-ui);
}

.factory-operational-view .btn-secondary {
  border-color:var(--border-default);
  background:var(--surface-1);
  color:var(--text-primary);
}

.factory-operational-view .btn-accent,
.factory-operational-view .btn-primary {
  border-color:var(--primary);
}

.factory-operational-view :is(.input-field, .select-field) {
  min-height:44px;
  border-color:var(--border-default);
  border-radius:var(--radius-md);
  background:var(--surface-0);
  color:var(--text-primary);
}

.factory-operational-view :is(.input-field, .select-field):focus-visible,
.factory-operational-view :is(.btn-primary, .btn-secondary, .btn-accent, .copy-btn):focus-visible {
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}

.factory-operational-view :is(.max-settings-table, .accounts-audit-table) {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  color:var(--text-primary);
  font-variant-numeric:tabular-nums;
}

.factory-operational-view :is(.max-settings-table, .accounts-audit-table) :is(th, td) {
  border-color:var(--border-subtle);
}

.factory-operational-view :is(.max-settings-table, .accounts-audit-table) th {
  background:var(--surface-2);
  color:var(--text-muted);
  font:700 11px/1.3 var(--font-mono);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.factory-operational-view :is(.max-settings-table, .accounts-audit-table) tbody tr:hover {
  background:var(--surface-1);
}

.factory-operational-view .max-settings-table-wrap,
.factory-operational-view .accounts-audit-table-wrap {
  overscroll-behavior-inline:contain;
  scrollbar-color:var(--border-strong) transparent;
}

.factory-operational-view .sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

@media (max-width: 760px) {
  .factory-operational-view :is(.max-settings-head, .accounts-audit-head) {
    align-items:flex-start;
    gap:var(--space-3);
  }

  .factory-operational-view :is(.top-actions, .right-actions, .filters) {
    width:100%;
  }

  .factory-operational-view :is(.top-actions, .right-actions) :is(.btn-primary, .btn-secondary, .btn-accent) {
    flex:1 1 144px;
  }
}

/*
 * Safe-area-inset (PWA best practices 2026, iOS standalone).
 * Применяется ко всем интерфейсам (mp-dashboard, admin, bidmanager, login,
 * instructions) — у всех layout = .factory-shell.
 * См. https://web.dev/articles/viewport-fit и Apple HIG Safe Area.
 */
.factory-shell {
  padding-top:0;
  padding-right:env(safe-area-inset-right, 0);
  padding-bottom:env(safe-area-inset-bottom, 0);
  padding-left:env(safe-area-inset-left, 0);
}

.factory-shell .ar-rail,
.factory-shell .factory-rail {
  padding-top:env(safe-area-inset-top, 0);
}

.factory-shell .main-header.ar-topbar {
  padding-top:env(safe-area-inset-top, 0);
}

.factory-shell .app-layout,
.factory-shell .ar-shell {
  padding-bottom:env(safe-area-inset-bottom, 0);
}

@media (display-mode: standalone) {
  .factory-shell {
    /* iOS PWA: дополнительный padding для home indicator */
    padding-bottom:max(env(safe-area-inset-bottom, 0), 8px);
  }
}

.factory-operational-view .report-empty {
  color:var(--text-muted);
}

.report-empty {
  color:var(--text-primary) !important;
}

.factory-operational-view .accounts-audit-filter-select {
  background-image:none !important;
  background-color:var(--surface-0);
}

.factory-operational-view :is(.max-settings-table, .accounts-audit-table) tbody td {
  background:var(--surface-raised);
}

.factory-operational-view :is(.right-sub, .info-card .line, .autoload-preview-label, .autoload-preview-value, .settings-title-main, .settings-subtitle) {
  color:var(--text-primary);
}

.factory-operational-view .badge.neutral {
  border-color:var(--border-strong);
  background:var(--surface-2);
  color:var(--text-primary);
}

.factory-operational-view .badge.success {
  border-color:var(--success-border);
  background:var(--success-bg);
  color:var(--success-text);
}


.factory-operational-view .info-card {
  background:var(--surface-raised) !important;
}

.factory-operational-view .right-sub > [x-show] {
  opacity:1 !important;
}

.factory-operational-view .badge.success,
.factory-operational-view .btn-danger {
  color:var(--text-primary) !important;
}


.factory-operational-view :is(.info-card .line span, .autoload-preview-value, .settings-title-main, .settings-subtitle) {
  color:var(--text-primary) !important;
}

.factory-operational-view .badge.success {
  background:var(--success) !important;
  color:var(--on-primary) !important;
}

.factory-operational-view .badge.success * {
  color:inherit !important;
}

.factory-operational-view .badge.neutral {
  background:var(--surface-2) !important;
}

.factory-operational-view .quick-actions .btn-danger {
  background-color:#a01107 !important;
  background-image:none !important;
  border-color:#a01107 !important;
  color:#fff !important;
}

.factory-operational-view .btn-danger {
  background-color:#a01107 !important;
  background-image:none !important;
  color:var(--on-primary) !important;
}

.factory-operational-view :is(.info-card .line, .settings-card-title, .autoload-preview-row) {
  background-color:var(--surface-raised);
}

.factory-operational-view .account-tag {
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
}

.factory-operational-view .quick-actions {
  opacity:1;
}

.autoload-pipeline {
  display:grid;
  gap:16px;
}

.autoload-pipeline > .pipe-head,
.autoload-pipeline > .pipe-status,
.autoload-pipeline > .pipe-steps {
  grid-column:1 / -1;
}

.pipe-head h2 {
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(20px, 2vw, 26px);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.15;
  text-transform:uppercase;
}

.pipe-status {
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) auto;
  overflow:hidden;
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:var(--surface-raised);
}

.pipe-status[data-tone="success"] .pipe-status__lead { background:var(--success-bg); }
.pipe-status[data-tone="danger"] .pipe-status__lead { background:var(--error-bg); }
.pipe-status[data-tone="info"] .pipe-status__lead { background:var(--info-bg); }

.pipe-status__lead,
.pipe-status__aside {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
}

.pipe-status__aside {
  border-inline-start:1px solid var(--border-subtle);
  background:var(--surface-1);
}

.pipe-status__mark {
  display:grid;
  width:36px;
  height:36px;
  flex:0 0 36px;
  place-items:center;
  border-radius:var(--radius-full);
  background:var(--surface-0);
  color:var(--success);
}

.pipe-status[data-tone="danger"] .pipe-status__mark { color:var(--danger); }
.pipe-status[data-tone="info"] .pipe-status__mark { color:var(--info); }

.pipe-status__title {
  margin:0;
  font:700 15px/1.3 var(--font-ui);
}

.pipe-status__meta {
  margin:2px 0 0;
  color:var(--text-muted);
  font-size:12px;
}

.pipe-icon {
  display:block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.pipe-icon--lg {
  width:20px;
  height:20px;
  flex-basis:20px;
}

.pipe-steps {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1.2fr);
  align-items:stretch;
  margin:0;
  padding:0;
  list-style:none;
}

.pipe-connector {
  align-self:center;
  height:2px;
  background:var(--border-default);
}

.pipe-step {
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:var(--surface-raised);
}

.pipe-step[data-state="current"] {
  border-color:var(--primary);
  background:var(--primary);
  color:var(--on-primary);
}

.pipe-step[data-state="busy"] {
  border-color:var(--info-border);
  background:var(--info-bg);
}

.pipe-step[data-state="blocked"] {
  opacity:.7;
}

.pipe-step h3 {
  margin:0;
  font-size:15px;
  line-height:1.2;
}

.pipe-step p {
  margin:3px 0 0;
  font-size:12px;
  opacity:.82;
}

.pipe-step__copy { min-width:0; flex:1; }

.pipe-step__index {
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border-radius:var(--radius-full);
  border:1.5px solid currentColor;
}

.pipe-step .btn-primary,
.pipe-step .btn-accent,
.pipe-step .btn-secondary {
  margin-inline-start:auto;
}

@media (max-width:1100px) {
  .pipe-status { grid-template-columns:minmax(0, 1fr); }
  .pipe-status__aside {
    justify-content:flex-start;
    border-inline-start:0;
    border-block-start:1px solid var(--border-subtle);
  }
  .pipe-steps { grid-template-columns:minmax(0, 1fr); }
  .pipe-connector { width:2px; height:14px; justify-self:center; }
}

.pipe-card-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-block-end:12px;
}

.pipe-card-head__id {
  display:flex;
  min-width:0;
  align-items:flex-start;
  gap:10px;
}

.pipe-card-head__glyph {
  display:grid;
  width:36px;
  height:36px;
  flex:0 0 36px;
  place-items:center;
  border-radius:var(--radius-md);
  border:1px solid var(--border-default);
  background:var(--surface-2);
  color:var(--text-primary);
}

.pipe-card-head__title {
  margin:0;
  font:700 15px/1.25 var(--font-ui);
}

.pipe-card-head__meta {
  color:var(--text-muted);
  font-size:12px;
}

.pipe-status__clock {
  display:grid;
  gap:2px;
  color:var(--text-muted);
  font-size:12px;
}

.pipe-status__clock strong {
  color:var(--text-primary);
  font:700 13px/1.2 var(--font-ui);
}

.pipe-accord {
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:var(--surface-1);
}

.pipe-accord > summary {
  display:flex;
  min-height:48px;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  cursor:pointer;
  font:700 13px/1.3 var(--font-ui);
  list-style:none;
}

.pipe-accord > summary::-webkit-details-marker {
  display:none;
}

.pipe-accord > summary .pipe-icon {
  color:var(--text-muted);
}

.pipe-accord__hint {
  margin-inline-start:auto;
  color:var(--text-muted);
  font:500 12px/1.3 var(--font-ui);
}

.pipe-accord > summary::after {
  color:var(--text-muted);
  content:"▾";
  font-size:12px;
}

.pipe-accord[open] > summary::after {
  content:"▴";
}

.pipe-accord__body {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 14px 14px;
}

.autoload-pipeline .stat-label {
  display:flex;
  align-items:center;
  gap:6px;
}

@media (min-width:1100px) {
  .autoload-pipeline {
    grid-template-columns:minmax(0, 1.15fr) minmax(280px, .85fr);
  }
  .autoload-pipeline > :not(.pipe-source):not(.stats-grid) {
    grid-column:1 / -1;
  }
}

@media (max-width:1100px) {
  .pipe-steps {
    grid-template-columns:minmax(0, 1fr);
  }
}

:root[data-theme="dark"] .factory-shell :is(.btn-accent, .right-actions .btn-primary, .top-actions .btn-primary) {
  background-color:#a01107 !important;
  background-image:none !important;
  color:#fff !important;
}

/*
 * DSG-001: canonical component primitives per DESIGN.md §7. These complete
 * the .ar-* layer for tabs, toolbars, badges, chips, dialogs, toasts, tables
 * and switches. They are intentionally compact and data-first; no gradients,
 * glass or decorative motion.
 */

/* Tabs switch peer views; filters narrow one view (DESIGN.md §7.6). */
.ar-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding:4px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  background:var(--surface-1);
}

.ar-tab {
  display:inline-flex;
  min-height:36px;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border:1px solid transparent;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  font:700 13px/1.2 var(--font-ui);
  transition:background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.ar-tab:hover:not(:disabled) {
  background:var(--surface-2);
  color:var(--text-primary);
}

.ar-tab[aria-selected="true"],
.ar-tab.is-active {
  border-color:var(--border-default);
  background:var(--surface-active);
  color:var(--text-primary);
}

.ar-tab:disabled {
  cursor:not-allowed;
  opacity:.58;
}

/* Toolbar: search, period and status filters in one row, wraps on tablet. */
.ar-toolbar {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

/* Badges: semantic status nouns, never hue alone (DESIGN.md §7.6). */
.ar-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:22px;
  padding:2px 8px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-full);
  background:var(--surface-1);
  color:var(--text-muted);
  font:700 11px/1.4 var(--font-ui);
  white-space:nowrap;
}

.ar-badge::before {
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:currentColor;
  content:"";
}

.ar-badge[data-tone="success"] {
  border-color:var(--success-border);
  background:var(--success-bg);
  color:var(--success);
}

.ar-badge[data-tone="warning"] {
  border-color:var(--warning-border);
  background:var(--warning-bg);
  color:var(--warning);
}

.ar-badge[data-tone="danger"] {
  border-color:var(--error-border);
  background:var(--error-bg);
  color:var(--danger);
}

.ar-badge[data-tone="info"] {
  border-color:var(--info-border);
  background:var(--info-bg);
  color:var(--info);
}

.ar-badge[data-tone="neutral"] {
  border-color:var(--border-default);
  background:var(--surface-1);
  color:var(--text-muted);
}

/* Chips: compact filters in a toolbar. */
.ar-chip {
  display:inline-flex;
  min-height:32px;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-full);
  background:var(--surface-0);
  color:var(--text-muted);
  cursor:pointer;
  font:600 12px/1.3 var(--font-ui);
  transition:background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.ar-chip:hover:not(:disabled) {
  border-color:var(--border-strong);
  background:var(--surface-2);
  color:var(--text-primary);
}

.ar-chip[aria-pressed="true"],
.ar-chip.is-active {
  border-color:var(--primary);
  background:var(--surface-active);
  color:var(--primary);
}

/* Dialog: native semantics, focus trap, Escape close, focus return (§7.11). */
.ar-dialog-backdrop {
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:16px;
  background:color-mix(in srgb, var(--text-primary) 46%, transparent);
}

.ar-dialog {
  width:100%;
  max-width:400px;
  max-height:min(88dvh, 720px);
  overflow-y:auto;
  padding:20px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:var(--surface-raised);
  box-shadow:var(--shadow-pop);
}

.ar-dialog--wide {
  max-width:760px;
}

.ar-dialog__title {
  margin:0 0 4px;
  font-size:17px;
  font-weight:700;
  line-height:1.25;
}

.ar-dialog__actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  margin-block-start:16px;
}

/* Toast: transient completed actions or global failures (§7.10). */
.ar-toast {
  position:fixed;
  z-index:70;
  inset-block-end:20px;
  inset-inline-start:50%;
  display:flex;
  min-width:min(420px, calc(100vw - 32px));
  max-width:min(480px, calc(100vw - 32px));
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  background:var(--surface-raised);
  box-shadow:var(--shadow-pop);
  color:var(--text-primary);
  font-size:13px;
  line-height:1.45;
  transform:translateX(-50%);
}

.ar-toast[data-tone="success"] {
  border-color:var(--success-border);
  background:var(--success-bg);
}

.ar-toast[data-tone="error"] {
  border-color:var(--error-border);
  background:var(--error-bg);
}

.ar-toast[data-tone="warning"] {
  border-color:var(--warning-border);
  background:var(--warning-bg);
}

/* Tables: wide tables scroll inside their own labelled wrapper (§7.8). */
.ar-table-wrap {
  width:100%;
  overflow-x:auto;
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:var(--surface-raised);
}

.ar-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  line-height:1.4;
}

.ar-table th {
  padding:10px 12px;
  border-bottom:1px solid var(--border-default);
  background:var(--surface-2);
  color:var(--text-muted);
  font:700 11px/1.4 var(--font-ui);
  letter-spacing:.02em;
  text-align:left;
  text-transform:uppercase;
}

.ar-table th[aria-sort] {
  cursor:pointer;
}

.ar-table td {
  padding:10px 12px;
  border-bottom:1px solid var(--border-subtle);
  vertical-align:middle;
}

.ar-table tbody tr:hover {
  background:var(--surface-1);
}

.ar-table--numeric td {
  font-variant-numeric:tabular-nums;
}

/* Switch: accessible toggle (role=switch). */
.ar-switch {
  position:relative;
  display:inline-flex;
  width:40px;
  height:24px;
  flex:0 0 40px;
  align-items:center;
  padding:2px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-full);
  background:var(--surface-2);
  cursor:pointer;
  transition:background-color var(--motion-fast) var(--ease-standard);
}

.ar-switch[aria-checked="true"],
.ar-switch.is-on {
  border-color:var(--primary);
  background:var(--primary);
}

.ar-switch::after {
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--on-primary);
  content:"";
  transition:transform var(--motion-fast) var(--ease-standard);
}

.ar-switch[aria-checked="true"]::after,
.ar-switch.is-on::after {
  transform:translateX(16px);
}

.ar-switch:disabled {
  cursor:not-allowed;
  opacity:.58;
}

/* Density mode (PWA-NAV-003): opt-in row/content compression for desktop power users.
   State is applied with .ar-density-compact on html and persisted by app.js. */

/* ---- Density tokens ---- */
.ar-density-compact {
  --density-font-scale:0.93;
  --density-padding-factor:0.65;
  --density-line-height:1.3;
  --density-row-gap:8px;
}

/* ---- Content area & panels ---- */
.ar-density-compact .ar-content {
  padding:12px 8px !important;
}

.ar-density-compact .ar-panel {
  padding:var(--density-padding-factor,0.65);
}

.ar-density-compact .ar-panel__header {
  padding-block:6px;
}

.ar-density-compact .ar-kpi-strip {
  gap:var(--density-row-gap,8px);
}

/* ---- Rows / list items ---- */
.ar-density-compact :is(.ar-list-item,.ar-row,.factory-shell table tbody tr),
.ar-density-compact :is(.sidebar-account-option,.sidebar-nav-item,.sidebar-client-item) {
  min-height:36px;
  padding-block:4px;
}

html.ar-density-compact .factory-rail .sidebar-nav-item {
  min-height:36px;
  padding-block:4px;
}

@media (pointer: coarse) {
  html.ar-density-compact .factory-rail .sidebar-nav-item,
  html.ar-density-compact .sidebar-account-option,
  html.ar-density-compact .sidebar-client-item {
    min-height:44px;
  }
}

/* ---- Table cells ---- */
.ar-density-compact :is(.ar-table th,.ar-table td){
  padding-block:6px;
  padding-inline:8px;
  font-size:calc(13px * var(--density-font-scale));
}

/* ---- Typography ---- */
.ar-density-compact .ar-panel__title h2,
.ar-density-compact .ar-panel__title h3 {
  font-size:clamp(15px,1vw+13px,16px);
}

.ar-density-compact .ar-kpi__value {
  font-size:clamp(16px,1vw+14px,18px);
}

/* ---- Chips and badges ---- */
.ar-density-compact .ar-chip {
  padding-block:2px 6px;
  font-size:12px;
}

.ar-density-compact .ar-badge {
  padding-inline:6px;
  font-size:11px;
}

/* ---- Tab bar ---- */
.ar-density-compact .ar-tab {
  padding-block:6px;
  font-size:13px;
}

/* ---- Toolbar ---- */
.ar-density-compact .ar-toolbar {
  gap:6px;
}

.ar-density-compact .ar-toolbar input,
.ar-density-compact .ar-toolbar select {
  height:32px;
  font-size:13px;
  padding-inline:8px;
}

/* ---- Dialogs and toasts ---- */
.ar-density-compact .ar-dialog {
  padding:12px;
}

.ar-density-compact .ar-toast {
  padding:8px 12px;
  font-size:13px;
}

/* ---- Responsive defaults ---- */

/* Mobile (<769px): default NORMAL density */
@media(max-width:768px){
  html:not([data-density]){
    /* stays normal when no override */
  }
}

/* Desktop (>=769px): default COMPACT density */
@media(min-width:769px){
  html:not([data-density]){
    color-scheme:light dark;
  }
}


/*
 * PWA-NAV-001: Bottom tabbar (mobile ≤768px) + adaptive sidebar.
 * Fixed bottom bar with M3-style pill indicator; desktop hidden.
 */
.pwa-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(49pt + env(safe-area-inset-bottom, 0));
  display: flex;
  align-items: stretch;
  background: var(--surface-raised);
  border-top: 1px solid var(--border-subtle);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.pwa-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 49pt;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: color 120ms ease;
}

.pwa-tabbar__item svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 120ms ease;
}

.pwa-tabbar__item:hover {
  color: var(--text-primary);
}

.pwa-tabbar__item.active {
  color: var(--primary);
}

.pwa-tabbar__item.active::before {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  top: 4px;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

/* Hide on desktop */
@media (min-width: 769px) {
  .pwa-tabbar {
    display: none;
  }
}

/* Hamburger button — visible only on mobile */
.ar-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: background 120ms ease;
}

.ar-hamburger:hover {
  background: var(--surface-2);
}

.ar-hamburger:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.ar-hamburger svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Mobile: hide rail by default, slide-in on open */
@media (max-width: 768px) {
  .factory-shell .app-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ar-rail {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    bottom: 0;
    width: var(--sidebar-w, 260px);
    max-width: 80vw;
    transform: translateX(-100%);
    transition: transform 180ms ease;
    z-index: 200;
    overflow-y: auto;
  }

  [data-rail-open="true"] .ar-rail {
    transform: translateX(0);
  }

  /* Show hamburger on mobile */
  .ar-hamburger {
    display: flex;
  }

  /* Make main-area full width on mobile */
  .main-area {
    padding-bottom: calc(49pt + env(safe-area-inset-bottom, 0));
  }
}

/* Tablet: collapsed rail (icons only, 56px) */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --rail-width: 56px !important;
  }

  .ar-nav-link span:not(.factory-nav-link__code) {
    display: none;
  }

  .ar-nav-group__label {
    display: none;
  }
}