/* Blue Sky Commerce OS — canonical experience layer, 0.13.9 */

:root {
  --bss-content-sm: 42rem;
  --bss-content-md: 64rem;
  --bss-content-lg: 90rem;
  --bss-control-height: 48px;
  --bss-touch-target: 44px;
  --bss-safe-bottom: max(16px, env(safe-area-inset-bottom));
  --bss-z-sticky: 40;
  --bss-z-drawer: 400;
  --bss-z-modal: 1000;
  --bss-z-toast: 2000;
  --bss-z-skip: 3000;
  accent-color: var(--bss-primary);
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
button, [role="button"], summary, label[for] { touch-action: manipulation; }

:where(button, input, select, textarea, a[href], [role="button"], [tabindex]):focus-visible {
  outline: var(--bss-focus-width, 3px) solid var(--bss-primary) !important;
  outline-offset: 3px;
  box-shadow: var(--bss-focus-ring) !important;
}

:where(button, input, select, textarea):disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .52;
}

:where(.btn, .button, button:not(.shop-chip):not(.swatch):not(.command-item)) {
  min-height: var(--bss-touch-target);
}

:where(.password-toggle, .auth-password-toggle) {
  min-width: var(--bss-touch-target) !important;
  min-height: var(--bss-touch-target) !important;
}

:where(.theme-chevron svg, .role-login-art svg) {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.role-login-art svg { width: 64px; height: 64px; }
.bs-select__search button { width: 44px !important; height: 44px !important; }
.bs-select__search button svg { width: 18px; height: 18px; }

:where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
  min-height: var(--bss-touch-target);
}

body.commerce-page :where(.shop-results-control > button, .shop-category-chips-v4 > button) {
  min-height: var(--bss-touch-target) !important;
}

body.commerce-page button[data-action="open-quiz"] {
  min-height: var(--bss-touch-target) !important;
  padding-block: 10px !important;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  min-height: var(--bss-control-height);
}

:where(.input, .select, .textarea, input, select, textarea) {
  transition: border-color var(--bss-dur) ease, box-shadow var(--bss-dur) ease, background-color var(--bss-dur) ease;
}

:where(table) { font-variant-numeric: tabular-nums; }
:where(.table-wrap, .inventory-table-wrap) {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

:where(dialog, [role="dialog"]) { max-width: calc(100vw - 24px); }
:where(.modal, .shop-modal, .customer-modal, .visitor-product-preview, .visitor-stand-composer) {
  max-height: min(90dvh, 880px);
  overscroll-behavior: contain;
}

.bss-sr-only {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* React system UI */
#bssReactSystemRoot { position: relative; z-index: var(--bss-z-toast); }
.bss-react-icon { display: block; flex: 0 0 auto; }
.bss-react-offline {
  position: fixed;
  z-index: var(--bss-z-toast);
  inset-inline: 16px;
  inset-block-end: var(--bss-safe-bottom);
  width: min(760px, calc(100vw - 32px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--bss-warning) 35%, var(--bss-border));
  border-radius: var(--bss-radius-md);
  background: color-mix(in srgb, var(--bss-surface) 94%, var(--bss-warning) 6%);
  color: var(--bss-text);
  box-shadow: var(--bss-shadow-lg);
  animation: bss-system-enter var(--bss-dur-slow) var(--bss-ease) both;
}
.bss-react-offline__icon,
.bss-react-toast__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--bss-radius-sm);
  background: color-mix(in srgb, var(--bss-warning) 14%, transparent);
  color: var(--bss-warning);
}
.bss-react-offline > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.bss-react-offline small { color: var(--bss-text-soft); line-height: 1.65; }
.bss-react-offline button {
  border: 1px solid var(--bss-border-strong);
  border-radius: var(--bss-radius-sm);
  padding-inline: 14px;
  background: var(--bss-surface);
  color: var(--bss-text);
  cursor: pointer;
}

.bss-react-toasts {
  position: fixed;
  z-index: var(--bss-z-toast);
  inset-inline-end: 18px;
  inset-block-end: var(--bss-safe-bottom);
  width: min(390px, calc(100vw - 36px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}
.bss-react-toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--bss-border-strong);
  border-radius: var(--bss-radius-md);
  background: color-mix(in srgb, var(--bss-surface) 95%, transparent);
  color: var(--bss-text);
  box-shadow: var(--bss-shadow-lg);
  backdrop-filter: blur(18px) saturate(135%);
  pointer-events: auto;
  animation: bss-system-enter var(--bss-dur-slow) var(--bss-ease) both;
}
.bss-react-toast--success { border-color: color-mix(in srgb, var(--bss-success) 42%, var(--bss-border)); }
.bss-react-toast--success .bss-react-toast__icon { color: var(--bss-success); background: color-mix(in srgb, var(--bss-success) 13%, transparent); }
.bss-react-toast--error { border-color: color-mix(in srgb, var(--bss-danger) 42%, var(--bss-border)); }
.bss-react-toast--error .bss-react-toast__icon { color: var(--bss-danger); background: color-mix(in srgb, var(--bss-danger) 13%, transparent); }
.bss-react-toast__copy { min-width: 0; display: grid; gap: 3px; line-height: 1.65; }
.bss-react-toast__copy > span { color: var(--bss-text-soft); }
.bss-react-toast > button {
  width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--bss-radius-sm);
  background: transparent;
  color: var(--bss-text-soft);
  cursor: pointer;
}

.bss-react-backtop {
  position: fixed;
  z-index: var(--bss-z-sticky);
  inset-inline-end: 18px;
  inset-block-end: calc(var(--bss-safe-bottom) + 2px);
  width: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bss-border-strong);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bss-surface) 92%, transparent);
  color: var(--bss-primary);
  box-shadow: var(--bss-shadow-md);
  backdrop-filter: blur(16px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--bss-dur) ease, transform var(--bss-dur) var(--bss-ease), visibility var(--bss-dur);
}
.bss-react-backtop[data-visible="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
body:has(.customer-mobile-nav) .bss-react-backtop,
body:has(.visitor-bottom-nav) .bss-react-backtop { inset-block-end: calc(86px + env(safe-area-inset-bottom)); }

/* Typography and controls */
body.commerce-page :where(p, li, dd),
body.customer-auth-page :where(p, li),
body.register-page :where(p, li),
body.payment-page :where(p, li) { line-height: 1.85; }

body.panel-body :where(.muted, small, label, td, th),
body.visitor-app-body :where(small, label, td, th),
body.customer-panel-page :where(small, label, td, th) { line-height: 1.65; }

body.panel-body :where(input, select, textarea),
body.visitor-app-body :where(input, select, textarea),
body.customer-panel-page :where(input, select, textarea) { font-size: max(14px, .875rem); }

body.commerce-page :where(.shop-button, .btn, button),
body.customer-auth-page :where(.btn, button),
body.register-page :where(.btn, button) { min-height: 46px; }

/* Stable mobile layouts */
@media (max-width: 1279px) {
  body.panel-body .panel-main { min-width: 0; }
  body.panel-body :where(.stats, .dashboard-grid, .finance-phase3-kpis, .finance-statement-grid.three) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  body.commerce-page .shop-container { width: min(100% - 28px, var(--bss-content-lg)); }
  body.commerce-page :where(.premium-section-head, .shop-catalog-intro-grid) { align-items: start; }
  body.panel-body :where(.modal, .customer-modal, .shop-modal) { width: min(92vw, 760px); }
  body.visitor-app-body .visitor-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root { --bss-control-height: 50px; }
  body { font-size: 16px; }
  body.commerce-page .shop-container { width: min(100% - 20px, var(--bss-content-lg)); }
  body.commerce-page :where(.shop-section, .shop-content-body) { scroll-margin-top: 88px; }
  body.commerce-page :where(.shop-product-grid, .premium-discovery-grid) { grid-template-columns: 1fr; }
  body.commerce-page :where(.shop-modal, .shop-cart-drawer) { border-radius: 22px 22px 0 0; }

  body.panel-body :where(.stats, .dashboard-grid, .finance-phase3-kpis, .finance-statement-grid, .finance-statement-grid.three),
  body.customer-panel-page :where(.customer-dashboard-grid, .customer-summary-grid),
  body.visitor-app-body :where(.visitor-product-grid, .visitor-stand-capacity, .visitor-stand-fixed-list, .visitor-stand-choice-list) {
    grid-template-columns: 1fr;
  }

  body.panel-body :where(.table, .inventory-table) { min-width: 720px; }
  body.panel-body :where(.modal-backdrop, .customer-modal-backdrop, .shop-modal-backdrop) {
    align-items: end;
    padding: 8px;
  }
  body.panel-body :where(.modal, .customer-modal, .shop-modal) {
    width: 100%;
    max-height: min(92dvh, 880px);
    border-radius: 24px 24px 16px 16px;
  }

  body.visitor-app-body .visitor-product-card { grid-template-columns: 112px minmax(0, 1fr); }
  body.visitor-app-body .visitor-product-card-body p { font-size: 13px; }
  body.visitor-app-body .visitor-product-profit { font-size: 12px; }
  body.visitor-app-body .visitor-product-preview { grid-template-columns: 1fr; padding: 16px; }
  body.visitor-app-body .visitor-product-preview-close { width: 44px; height: 44px; }

  .bss-react-offline { grid-template-columns: auto minmax(0, 1fr); }
  .bss-react-offline button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 479px) {
  body.commerce-page :where(.shop-header-actions, .shop-mobile-bar) { gap: 4px; }
  body.commerce-page :where(.shop-product-card, .home-selected-card) { border-radius: 20px; }
  body.register-page { padding: 8px; }
  body.register-page .register-card { padding: 18px 14px; }
  body.customer-auth-page .customer-auth-card { padding-inline: 14px; }
  body.visitor-app-body .visitor-product-card { grid-template-columns: 1fr; }
  body.visitor-app-body .visitor-product-image-button,
  body.visitor-app-body .visitor-product-image-button > img { min-height: 220px; }
  .bss-react-toasts { inset-inline: 10px; width: auto; }
}

@media (max-height: 520px) and (orientation: landscape) {
  :where(.customer-mobile-nav, .visitor-bottom-nav) { position: sticky; }
  :where(.modal, .shop-modal, .customer-modal, .visitor-product-preview) { max-height: calc(100dvh - 12px); }
  body.customer-auth-page .customer-auth-story,
  body.register-page .register-side { display: none; }
}

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

@keyframes bss-system-enter {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* === Mobile OS: kill forced page min-width scroll === */
@media (max-width: 820px) {
  html, body { min-width: 0 !important; }
  .table { min-width: 560px !important; }
  .shop-product-grid { grid-template-columns: 1fr !important; }
}