/* HU-540: compact mobile foundations. Layout and control contracts stay shared. */
:root {
  --mobile-header-height: 0px;
  --mobile-navigation-height: 0px;
  --mobile-touch-target: 44px;
  --mobile-surface: #fff;
  --mobile-canvas: #f6f5f2;
  --mobile-ink: #182230;
  --mobile-border: #dde1e6;
  --mobile-action: #245dc4;
  --mobile-muted: #52606f;
  --mobile-space-1: 4px;
  --mobile-space-2: 8px;
  --mobile-space-3: 12px;
  --mobile-space-4: 16px;
  --mobile-page-gutter: 12px;
  --mobile-control-radius: 8px;
  --mobile-card-radius: 8px;
  --mobile-field-gap: 12px;
  --mobile-section-gap: 16px;
}
.mobile-app-header,
.mobile-tabbar,
.mobile-nav-heading,
.mobile-nav-search,
.mobile-nav-results { display: none; }
.nav-items { display: contents; }
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  z-index: 2000;
  padding: 12px 16px;
  border-radius: 8px;
  background: #182230;
  color: #fff;
}
.skip-link:focus { transform: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #245dc4;
  outline-offset: 3px;
}

/* Text-field padding can expand native binary controls when focus changes appearance. */
body input:is([type="checkbox"], [type="radio"]) { padding: 0; }


@media (max-width: 980px) {
  :root {
    --mobile-header-height: calc(52px + env(safe-area-inset-top));
    --mobile-navigation-height: calc(60px + env(safe-area-inset-bottom));
  }
  html { scroll-padding-top: calc(var(--mobile-header-height) + 16px); scroll-padding-bottom: calc(var(--mobile-navigation-height) + 20px); }
  body {
    padding: 0;
    min-height: 100dvh;
    background: var(--mobile-surface);
    color: var(--mobile-ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.45;
  }
  body.mobile-focus-flow,
  body.mobile-keyboard-open { --mobile-navigation-height: 0px; }
  body .layout,
  body.nav-collapsed .layout {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 100dvh;
    gap: 0;
    padding: calc(var(--mobile-header-height) + var(--mobile-space-3)) max(var(--mobile-page-gutter), env(safe-area-inset-right)) calc(var(--mobile-navigation-height) + var(--mobile-space-4)) max(var(--mobile-page-gutter), env(safe-area-inset-left));
  }
  body .layout > main.panel {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
  }
  /* Public authentication shares the type/spacing system without app navigation. */
  html body.auth-body { align-items: start; padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: var(--mobile-surface); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  .auth-body .auth-shell { width: min(560px, 100%); grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .auth-body :is(.auth-card, .auth-panel) { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .auth-body .auth-card > .pill { padding: 0; border-radius: 0; background: none; color: var(--mobile-muted); font-size: 12px; }
  .auth-body .auth-card h1 { margin-top: 6px; font-size: 26px; line-height: 1.2; }
  .auth-body .auth-card :is(input, button, a.btn) { min-height: 44px; }
  .auth-body .auth-panel { padding-top: 16px; border-top: 1px solid var(--mobile-border); gap: 8px; font-size: 14px; line-height: 1.45; }
  .auth-body .auth-highlight { gap: 6px; }
  .auth-body .auth-highlight .pill { padding: 0; background: none; color: var(--mobile-muted); font-size: 12px; }
  .auth-body .auth-panel h3 { font-size: 18px; }
  .auth-body .auth-panel ul { margin-top: 0; gap: 6px; font-weight: 400; }
  .auth-body .auth-panel small { font-size: 12px; opacity: 1; color: var(--mobile-muted); }
  body .panel h1 { font-size: 24px; line-height: 1.2; letter-spacing: -.025em; }
  body .panel h2 { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
  body .panel h3 { font-size: 16px; line-height: 1.35; }
  body .panel .subtitle { font-size: 14px; line-height: 1.45; margin-bottom: 8px; color: var(--mobile-muted); }
  body .layout > main.panel .card { padding: var(--mobile-space-3); gap: var(--mobile-space-3); border-radius: var(--mobile-card-radius); box-shadow: none; }
  body .layout > main.panel .card > .card-header { margin: -12px -12px 0; padding: 10px 12px; border-radius: var(--mobile-card-radius) var(--mobile-card-radius) 0 0; }
  body .field { gap: 6px; }
  body .field > label, body label.form-label { font-size: 14px; line-height: 1.4; }
  body .field > :is(small, .field-hint) { margin-top: 0; font-size: 12px; line-height: 1.4; color: var(--mobile-muted); }
  body .btn { padding: 9px 12px; border-radius: var(--mobile-control-radius); font-size: 14px; line-height: 1.35; }
  .mobile-app-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--mobile-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--mobile-border);
    background: var(--mobile-surface);
  }
  .mobile-app-header__identity { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .mobile-app-header__identity > span { color: var(--mobile-ink); font-size: 14px; font-weight: 700; letter-spacing: .04em; }
  body .mobile-app-header .nav-toggle--outside {
    position: static;
    flex: 0 0 44px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 10px;
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
  }
  body:has([data-mobile-tabbar]):not(.mobile-focus-flow):not(.mobile-keyboard-open) .mobile-app-header .nav-toggle--outside { display: none; }
  .mobile-tabbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 90;
    display: flex;
    justify-content: space-around;
    gap: 2px;
    height: var(--mobile-navigation-height);
    padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: #fff;
    border-top: 1px solid var(--mobile-border);
  }
  .mobile-tabbar > a,
  .mobile-tabbar > button {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 44px;
    min-height: 48px;
    max-width: 120px;
    padding: 4px 2px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #52606f;
    text-decoration: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
  }
  .mobile-tabbar > :is(a, button) > span { white-space: nowrap; overflow-wrap: normal; }
  .mobile-tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
  .mobile-tabbar > .is-active { background: #edf3ff; color: #245dc4; }
  body.mobile-focus-flow .mobile-tabbar,
  body.mobile-keyboard-open .mobile-tabbar { display: none; }
  body.nav-open .mobile-app-header,
  body.nav-open .mobile-tabbar { visibility: hidden; }
  body .nav {
    height: 100dvh;
    height: var(--mobile-viewport-height, 100dvh);
    top: var(--mobile-viewport-top, 0px);
    bottom: auto;
    align-content: start;
    gap: 12px;
    padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: #fff;
    overscroll-behavior: contain;
    transform: translateY(12px);
    transition: transform 160ms ease, opacity 160ms ease;
  }
  .mobile-nav-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .mobile-nav-heading strong { font-size: 22px; letter-spacing: -.025em; }
  body .mobile-nav-close { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--mobile-border); border-radius: 8px; background: #fff; color: var(--mobile-ink); font: inherit; font-size: 14px; }
  .mobile-nav-close > span { font-size: 24px; line-height: 1; }
  .mobile-nav-search { display: grid; gap: 6px; }
  .mobile-nav-search label { font-size: 13px; font-weight: 600; }
  .mobile-nav-search input { width: 100%; }
  .mobile-nav-results { display: grid; gap: 6px; }
  body .nav a.mobile-nav-result { padding: 12px; line-height: 1.45; font-size: 14px; color: var(--mobile-ink); text-decoration: none; border: 1px solid var(--mobile-border); border-radius: 8px; box-shadow: none; }
  .nav-items { display: grid; gap: 6px; }
  body .nav .nav-user { padding: 10px; border-radius: 8px; background: #f6f7f9; border-color: #e8eaee; }
  body .nav .nav-avatar { background: #e6eaf0; color: #344054; }
  body .nav .nav-title { margin: 2px 0 0; font-size: 13px; color: #586473; font-weight: 600; }
  body .nav .nav-link { min-height: 48px; padding: 12px; font-size: 15px; line-height: 1.35; border: 1px solid #e8eaee; border-radius: 8px; background: #fff; box-shadow: none; }
  body .nav .nav-link.active,
  body .nav .nav-node.active > .nav-link { border-color: #b9cdf4; background: #edf3ff; color: #174891; box-shadow: none; }
  body .nav .nav-logout { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; border-radius: 8px; font-size: 13px; box-shadow: none; }
  body .nav .nav-flyout { margin: 0; padding: 4px 0 4px 12px; border: 0; border-left: 2px solid #dde5f3; border-radius: 0; }
  /* Hover emulation must never open a second branch on a touch-sized viewport. */
  .nav-node.nav-has-children:not(.is-open) > .nav-flyout { display: none; }
  body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]) {
    min-height: var(--mobile-touch-target);
    padding: 9px 12px;
    border-radius: var(--mobile-control-radius);
    background: var(--mobile-surface);
    font-size: 16px !important;
    line-height: 1.35;
  }
  body :is(button, .btn, input[type="submit"], input[type="button"], summary) { min-height: 44px; touch-action: manipulation; }
  body :is(input, select, textarea, button, summary, [tabindex]) { scroll-margin-top: calc(var(--mobile-header-height) + 16px); scroll-margin-bottom: calc(var(--mobile-navigation-height) + 24px); }
  body .modal {
    top: var(--mobile-viewport-top, 0px);
    bottom: auto;
    height: var(--mobile-viewport-height, 100dvh);
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body .modal-card { max-height: calc(var(--mobile-viewport-height, 100dvh) - 32px); overflow: auto; overscroll-behavior: contain; }
  .mobile-keyboard-open .mobile-app-header { position: absolute; }

  body .btn.primary, body button.primary, body input.primary[type="submit"] { background: var(--mobile-action); border: 1px solid transparent; color: #fff; box-shadow: none; }
  body .nav:has([data-nav-results]:not([hidden])) .nav-title { display: none; }

  body .image-viewer__panel { display: flex; flex-direction: column; max-height: calc(var(--mobile-viewport-height, 100dvh) - 24px); }
  body .image-viewer__header { flex-shrink: 0; }
  body .image-viewer__content { min-height: 0; overflow: auto; overscroll-behavior: contain; }
  body .image-viewer__preview { min-height: 180px; }
  body .image-viewer__toggle { min-height: 44px; }
  body .image-viewer__header .icon-btn { min-width: 44px; min-height: 44px; }

  body .dashboard-layout { gap: 16px; }
  body .dashboard-layout-grid > .block { border: 1px solid var(--mobile-border); border-radius: 12px; box-shadow: none; }

  body .products-list-refresh, body .product-form__eyebrow > a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  body .bulk-filter-state-presets .btn, body .bulk-filter-actions .btn,
  body .bulk-filter-actions button { min-height: 44px; }
  body .bulk-filter-help { width: 44px; min-width: 44px; height: 44px; }

  .site-publication-photo-dialog {
    inset: calc(var(--mobile-viewport-top, 0px) + 12px) 0 auto;
    margin: 0 auto;
    max-height: calc(var(--mobile-viewport-height, 100dvh) - 24px);
    overflow: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width: 360px) {
  :root { --mobile-page-gutter: 10px; }
  .mobile-app-header__identity { gap: 6px; }
}
/* Explicit opt-in for operational counters; figures stay readable in two columns. */
@media (max-width: 820px) {
  body .layout > main.panel [data-mobile-metrics] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 12px; }
  body .layout > main.panel [data-mobile-metrics] > * { grid-column: auto !important; min-width: 0; padding: 8px 0 !important; border: 0; border-bottom: 1px solid var(--mobile-border); border-radius: 0; background: transparent; box-shadow: none; font-size: 13px; line-height: 1.4; }
  body .layout > main.panel [data-mobile-metrics] .subtitle { margin: 0; font-size: 13px; line-height: 1.4; }
  body .layout > main.panel [data-mobile-metrics] strong { font-size: 18px; font-variant-numeric: tabular-nums; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav,
  .nav-caret,
  .nav-toggle span,
  .panel { animation: none !important; transition: none !important; }
}


.autocomplete-suggestion[aria-selected="true"] { background: #edf3ff; outline: 2px solid #245dc4; outline-offset: -2px; }