/* ==========================================================================
   Amaze Business OS — UI/UX compliance layer (v2.2)
   Loaded AFTER app.css so it corrects the base sheet without rewriting it.

   Addresses, in priority order:
     1. Accessibility  — visible focus, contrast, skip link, reduced motion
     2. Touch          — 44x44 minimum targets, 8px separation, press feedback
     3. Typography     — readable type scale (the base sheet used 7–9px text)
     4. Forms          — 16px inputs on mobile (prevents iOS auto-zoom)
     5. Layout         — dvh viewport units, safe-area padding
   ========================================================================== */

:root{
  /* Type scale: 11 / 12 / 13 / 14 / 16 / 18 / 22 / 28 */
  --fs-micro:11px;   /* badges, chips — never body copy */
  --fs-meta:12px;    /* secondary metadata, table sub-lines */
  --fs-sm:13px;      /* labels, dense table cells */
  --fs-body:14px;    /* default body copy */
  --fs-lg:16px;      /* emphasis, form inputs */
  --fs-h3:18px;
  --fs-h2:22px;
  --fs-h1:28px;

  --tap:44px;              /* Apple HIG minimum touch target */
  --tap-gap:8px;           /* minimum separation between targets */
  --focus:#1769e0;
  --focus-ring:3px;
  --motion-fast:150ms;
  --motion:220ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
}
body[data-theme=dark]{ --focus:#7fb4ff; }

/* --------------------------------------------------------------------------
   1. ACCESSIBILITY — visible focus on every interactive element.
   The base sheet only styled input:focus, so keyboard users had no indicator
   on buttons, links, nav items, product cards, tabs or table actions.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:var(--focus-ring) solid var(--focus);
  outline-offset:2px;
  border-radius:8px;
}
/* Cards and nav rows get the ring inset so it is not clipped by scroll parents. */
.product-card:focus-visible,
.work-card:focus-visible,
.nav a:focus-visible,
.workspace-tabs a:focus-visible,
.industry-card:focus-visible,
.attachment-row:focus-visible{
  outline-offset:-2px;
}
/* Never remove the ring — restore it if any rule tries. */
:focus-visible{ outline-color:var(--focus); }

/* Skip link for keyboard users (WCAG 2.4.1). */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--surface);color:var(--text);
  border:2px solid var(--focus);border-radius:0 0 10px 0;
  padding:12px 18px;font-size:var(--fs-body);font-weight:700;
}
.skip-link:focus{ left:0; }

/* Flash messages announce themselves to screen readers (see layout.php role). */
.alert{ font-size:var(--fs-body); line-height:1.5; padding:13px 15px; }

/* Screen-reader-only helper (base sheet defines .sr-only; keep parity). */
.visually-hidden{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* Respect prefers-reduced-motion (WCAG 2.3.3 / Apple Reduced Motion). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .simple-product-card:hover,.attachment-row:hover{ transform:none!important; }
}

/* --------------------------------------------------------------------------
   2. TOUCH & INTERACTION — 44x44 minimum, 8px separation, press feedback.
   -------------------------------------------------------------------------- */
button,a[role=button],.btn,input[type=submit],input[type=button],
select,summary,.pill,.payment-chip,.order-type-btn{
  touch-action:manipulation;          /* removes the 300ms tap delay */
}

.btn{ min-height:var(--tap); padding:11px 16px; font-size:var(--fs-sm); }
.btn.big{ min-height:52px; font-size:var(--fs-lg); }
.icon-btn{ width:var(--tap); height:var(--tap); font-size:var(--fs-lg); }
.toolbar{ gap:var(--tap-gap); flex-wrap:wrap; }

/* Text actions inside tables were 8px text with 1px padding — effectively
   un-tappable on a phone. Give them a real hit area without changing layout
   density, using a transparent expansion. */
.text-action{
  font-size:var(--fs-sm);
  font-weight:700;
  min-height:var(--tap);
  display:inline-flex;
  align-items:center;
  padding:0 8px;
  margin:0 -8px;              /* hit area extends past the visual bounds */
  border-radius:8px;
  cursor:pointer;
}
.text-action:hover{ background:var(--surface2); }
.row-actions{ gap:var(--tap-gap); }

/* Quantity steppers on the POS bill — the primary repeated touch target. */
.qty button{ width:var(--tap); height:var(--tap); font-size:var(--fs-h3); font-weight:700; }
.qty span{ min-width:44px; font-size:var(--fs-body); font-variant-numeric:tabular-nums; }
.remove{ width:var(--tap); height:var(--tap); font-size:var(--fs-h3); }
.simple-cart-line .qty button{ width:var(--tap); height:var(--tap); }
.simple-cart-line .qty span{ min-width:44px; font-size:var(--fs-body); }
.cart-line{ gap:var(--tap-gap); padding:10px 2px; }

/* Category pills, payment chips and order-type tabs. */
.pill,.category-strip .pill{ min-height:var(--tap); padding:0 14px; font-size:var(--fs-sm); display:inline-flex; align-items:center; }
.pill-row{ gap:var(--tap-gap); }
.payment-quick{ gap:6px; }
.payment-chip{ min-height:var(--tap); font-size:var(--fs-sm); padding:0 6px; }
.order-type-btn{ min-height:var(--tap); font-size:var(--fs-sm); }
.order-type-tabs{ gap:6px; }
.exact-btn{ height:var(--tap); }

/* Press feedback within 100ms (Material state layer / HIG). */
.btn:active,.icon-btn:active,.pill:active,.payment-chip:active,
.order-type-btn:active,.qty button:active,.product-card:active{
  transform:scale(.97);
  transition:transform var(--motion-fast) var(--ease-out);
}
.product-card{ transition:border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out); }

/* Disabled state must be unmistakable and non-interactive. */
.btn:disabled,button:disabled,.product-card[disabled]{
  opacity:.45; cursor:not-allowed; pointer-events:none;
}
/* Submit buttons show progress while the request is in flight (app.js sets this). */
.btn[data-busy]{ opacity:.7; cursor:progress; pointer-events:none; }
.btn[data-busy]::after{
  content:"";width:14px;height:14px;margin-left:8px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:amz-spin .7s linear infinite;
}
@keyframes amz-spin{ to{ transform:rotate(360deg); } }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY — the base sheet ran 7–11px across the whole product.
   Body copy now starts at 14px and nothing functional drops below 11px.
   -------------------------------------------------------------------------- */
html{ font-size:16px; -webkit-text-size-adjust:100%; }
body{ font-size:var(--fs-body); line-height:1.5; }

h1{ font-size:var(--fs-h1); }
.page-heading h1{ font-size:var(--fs-h2); }
.page-heading small{ font-size:var(--fs-meta); }
.panel-head h2,.industry-hero h2,.cart-title h2,.settings-grid h2,.modal-head h2{ font-size:var(--fs-h3); }
h3,.section-title{ font-size:var(--fs-lg); }
.panel-head p,.industry-hero p,.settings-grid p{ font-size:var(--fs-sm); line-height:1.6; max-width:70ch; }
.eyebrow{ font-size:var(--fs-micro); letter-spacing:.08em; }

/* Tables: the densest surface, and where 9px text hurt most. */
th{ font-size:var(--fs-micro); letter-spacing:.05em; padding:12px; }
td{ font-size:var(--fs-sm); padding:12px; }
td small,.detail-list span,.mini-list small{ font-size:var(--fs-meta); }
td small{ line-height:1.45; }
/* Money and quantity columns align on the decimal point. */
td.right,th.right,.kpi strong,.total-box b,.total-box strong,.num-strong{ font-variant-numeric:tabular-nums; }
.num-strong{ font-weight:800; }

.status{ font-size:var(--fs-micro); padding:5px 9px; }
.kpi span{ font-size:var(--fs-meta); }
.kpi strong{ font-size:var(--fs-h2); }
.kpi small{ font-size:var(--fs-meta); opacity:.9; }

.nav a{ font-size:var(--fs-body); min-height:var(--tap); }
.nav a>span{ font-size:var(--fs-lg); width:22px; }
.nav-group>small{ font-size:var(--fs-micro); letter-spacing:.08em; padding:10px 10px 4px; }
.business-chip strong{ font-size:var(--fs-sm); }
.business-chip small{ font-size:var(--fs-meta); }
.sidebar-foot small{ font-size:var(--fs-meta); }
.sidebar-foot strong{ font-size:var(--fs-sm); }

label{ font-size:var(--fs-sm); }
.form-grid label small,.checkout-section-label{ font-size:var(--fs-meta); }
.checkout-section-label{ letter-spacing:.08em; }
.checkout-more summary{ font-size:var(--fs-body); min-height:var(--tap); align-items:center; }
.checkout-more summary span{ font-size:var(--fs-meta); }

.quick-grid b{ font-size:var(--fs-body); }
.quick-grid span{ font-size:var(--fs-meta); }
.product-card b{ font-size:var(--fs-body); line-height:1.35; }
.product-card small,.product-card-foot span{ font-size:var(--fs-meta); }
.product-card strong,.product-card-foot strong{ font-size:var(--fs-lg); }
.product-trace{ font-size:var(--fs-micro); padding:3px 6px; }
.cart-line b{ font-size:var(--fs-body); }
.cart-line small{ font-size:var(--fs-meta); }
.cart-line>strong{ font-size:var(--fs-body); }
.total-box span{ font-size:var(--fs-body); }
.total-box .grand{ font-size:var(--fs-lg); }
.simple-total span{ font-size:var(--fs-body); }
.simple-total .grand strong{ font-size:var(--fs-h2); }
.pos-shortcuts,.pos-shortcuts span{ font-size:var(--fs-meta); }
.pos-commandbar p{ font-size:var(--fs-sm); }
.pos-stock-note{ font-size:var(--fs-meta); }
.line-note,.line-price{ font-size:var(--fs-sm)!important; padding:8px!important; min-height:38px; }
.line-price{ width:120px!important; }

.work-card h3{ font-size:var(--fs-body); }
.work-card p,.work-card small,.work-card-foot{ font-size:var(--fs-meta); }
.work-card-top strong{ font-size:var(--fs-meta); }
.priority{ font-size:var(--fs-micro); padding:4px 7px; }
.status-column>header{ font-size:var(--fs-sm); }
.workspace-tabs a{ font-size:var(--fs-sm); min-height:var(--tap); }
.workspace-tabs a b{ font-size:var(--fs-micro); min-width:24px; height:24px; }
.column-empty,.muted-cell{ font-size:var(--fs-sm); }

.detail-card span{ font-size:var(--fs-meta); }
.detail-card b{ font-size:var(--fs-body); }
.timeline-item strong{ font-size:var(--fs-sm); }
.timeline-item small,.timeline-item p{ font-size:var(--fs-meta); line-height:1.5; }
.export-grid a{ font-size:var(--fs-body); min-height:var(--tap); }
.export-grid a span{ font-size:var(--fs-meta); line-height:1.45; }
.quick-links-vertical a{ min-height:var(--tap); }
.quick-links-vertical b{ font-size:var(--fs-body); }
.quick-links-vertical span{ font-size:var(--fs-meta); }
.staff-card strong{ font-size:var(--fs-body); }
.staff-card small{ font-size:var(--fs-meta); }
.mini-meta span{ font-size:var(--fs-micro); padding:5px 8px; }
.module-status-grid b{ font-size:var(--fs-sm); }
.attachment-row b{ font-size:var(--fs-sm); }
.attachment-row small{ font-size:var(--fs-meta); }
.pipeline-card span{ font-size:var(--fs-meta); }
.pipeline-card small{ font-size:var(--fs-meta); }
.callout{ font-size:var(--fs-sm); line-height:1.55; }
.tenant-badge{ font-size:var(--fs-meta); min-height:36px; display:inline-flex; align-items:center; }
.user-pill strong{ font-size:var(--fs-sm); }
.user-pill small{ font-size:var(--fs-meta); }
.privacy-strip strong{ font-size:var(--fs-body); }
.privacy-strip small{ font-size:var(--fs-meta); line-height:1.5; }
.owner-chip{ font-size:var(--fs-meta); padding:6px 10px; }
.workflow-feature-card strong{ font-size:var(--fs-body); }
.workflow-feature-card>small,.workflow-feature-card>div:first-child span{ font-size:var(--fs-meta); }
.workflow-mini-statuses span{ font-size:var(--fs-micro); padding:4px 7px; }
.module-cards b{ font-size:var(--fs-sm); }
.module-cards small{ font-size:var(--fs-meta); }
.industry-card h3{ font-size:var(--fs-body); }
.industry-card p{ font-size:var(--fs-meta); line-height:1.5; }
.industry-card small{ font-size:var(--fs-micro); }
.builder-head>div small,.builder-total{ font-size:var(--fs-meta); }
.check-list span,.workflow-step b{ font-size:var(--fs-sm); }
.empty-state,.empty-workspace p,.feature-chips span{ font-size:var(--fs-sm); }
.tenant-note strong{ font-size:var(--fs-sm); }
.tenant-note small,.tenant-rule small{ font-size:var(--fs-meta); line-height:1.55; }
.tenant-rule b{ font-size:var(--fs-body); }
.section-title-row small{ font-size:var(--fs-meta); }
.login-card>div>p{ font-size:var(--fs-body); }
.login-points span{ font-size:var(--fs-meta); padding:8px 12px; }
.login-intro p{ font-size:var(--fs-lg); }
.store-hero p{ font-size:var(--fs-body); }
.store-stat span{ font-size:var(--fs-meta); }
.store-footer{ font-size:var(--fs-meta); }
.top-gap-sm{ margin-top:9px; }

/* --------------------------------------------------------------------------
   4. FORMS — 16px controls prevent iOS from zooming on focus, and every
   control clears the 44px minimum height.
   -------------------------------------------------------------------------- */
input,select,textarea{
  font-size:var(--fs-lg);
  min-height:var(--tap);
  padding:11px 12px;
  line-height:1.4;
}
textarea{ min-height:88px; resize:vertical; }
input[type=checkbox],input[type=radio]{
  min-height:22px; width:22px; height:22px; accent-color:var(--primary);
}
.check-label{ min-height:var(--tap); cursor:pointer; }
.inline-form input,.inline-form select{ min-height:var(--tap); font-size:var(--fs-sm); padding:8px 10px; }
.purchase-line select,.purchase-line input{ min-height:var(--tap); font-size:var(--fs-sm); }
.attachment-upload input[type=file]{ min-height:var(--tap); font-size:var(--fs-sm); }
.search-box input{ font-size:var(--fs-lg); padding:12px 0; }
.search-box.slim input{ padding:10px 0; font-size:var(--fs-body); }
.pos-main-search input{ font-size:var(--fs-lg); }
/* Invalid fields are marked by shape and text, not colour alone. */
input:user-invalid,select:user-invalid,textarea:user-invalid{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(211,59,69,.12);
}
.field-error{
  display:flex;align-items:center;gap:6px;
  color:var(--danger);font-size:var(--fs-meta);font-weight:650;margin-top:4px;
}
.field-error::before{ content:"!";display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--danger);color:#fff;font-size:11px;font-weight:900;flex:0 0 auto; }

/* --------------------------------------------------------------------------
   5. MODAL — dialog semantics, scroll lock and a close control that is
   actually tappable.
   -------------------------------------------------------------------------- */
.modal-head button{ width:var(--tap); height:var(--tap); font-size:var(--fs-h2); }
.modal-card{ padding:20px; }
body.modal-open{ overflow:hidden; }
.modal.show{ animation:amz-fade var(--motion) var(--ease-out); }
.modal.show .modal-card{ animation:amz-rise var(--motion) var(--ease-out); }
@keyframes amz-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes amz-rise{ from{ opacity:0;transform:translateY(12px) } to{ opacity:1;transform:none } }

/* --------------------------------------------------------------------------
   6. LAYOUT — dvh instead of vh, safe-area insets, no horizontal overflow.
   -------------------------------------------------------------------------- */
.app-shell{ min-height:100dvh; }
.sidebar{ height:100dvh; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
.login-body{ min-height:100dvh; }
.store-body{ min-height:100dvh; }
.content{ overflow-x:clip; }
.topbar{ padding-left:max(22px,env(safe-area-inset-left)); padding-right:max(22px,env(safe-area-inset-right)); }

/* Mobile bottom dock: 5 items max, icon + label, real touch targets. */
.mobile-dock a,.mobile-dock button{ min-height:52px; }
.mobile-dock small{ font-size:var(--fs-micro); }
.mobile-dock span{ font-size:20px; }
.mobile-dock .active{ font-weight:800; }
/* Active tab is marked by an indicator bar, not colour alone. */
.mobile-dock .active::before{
  content:"";position:absolute;top:0;width:26px;height:3px;border-radius:0 0 3px 3px;background:currentColor;
}
.mobile-dock a,.mobile-dock button{ position:relative; }

@media(max-width:900px){
  /* Content must clear the fixed dock. */
  body{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
  .content{ padding:14px 14px 24px; }
  .page-heading h1{ font-size:var(--fs-h3); }
  .table-wrap{ -webkit-overflow-scrolling:touch; }
  /* Inline forms stop forcing a 420px minimum inside scrollable tables. */
  .inline-form,.compact-inline,.small-inline,.tiny-inline{ min-width:0; flex-wrap:wrap; }
}

@media(max-width:560px){
  .btn{ font-size:var(--fs-body); }
  .payment-quick{ grid-template-columns:repeat(2,1fr); }
  .modal{ padding:0; align-items:end; }
  .modal-card{
    width:100%;max-height:92dvh;border-radius:18px 18px 0 0;
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   7. PRINT — keep receipts and reports clean.
   -------------------------------------------------------------------------- */
@media print{
  .mobile-dock,.skip-link,.sticky-save,.mobile-cart-jump{ display:none!important; }
  body{ padding-bottom:0; font-size:12px; }
}