/* mobile-shell.css — the registrar's phone layout (<= 767px) for the app
 * shell: compact top bar, bottom tab bar + "More" sheet, the breadcrumb title
 * row, bottom-sheet styling for the shared overlays (Modal, SlidePanel,
 * Dropdown, notifications, command palette), toasts, auth pages, and the
 * utilities page styles build on (mobile-pages.css).
 *
 * Every rule that touches an existing selector sits inside
 * @media (max-width: 767px) — the same query as lib/mobile.js — so 768px and
 * up (tablet, desktop) render exactly as before. Rules outside it only style
 * classes that exist solely in the phone layout (.m-sheet*, .m-more-*).
 *
 * Shared API for page styles:
 *   --m-tabbar-h   tab bar height incl. the home-indicator inset; 0px on
 *                  signed-out pages, which have no tab bar
 *   --m-topbar-h   top bar height incl. the status-bar inset
 *   --m-sticky-h   height of a .mobile-sticky-actions bar when the page has one
 *   .mobile-sticky-actions  the page's primary actions, pinned above the tab bar
 *   .m-only / .m-hide       shown only / hidden only in the phone layout
 *   .m-kebab                44px icon button for a row's actions menu
 *   .m-sheet-action         an item in a BottomSheet (components/bottom-sheet.js)
 */

/* ------------------------------------------------------------------
 * Phone-only components (no desktop markup uses these classes)
 * ------------------------------------------------------------------ */

.m-sheet-root {
  position: fixed;
  inset: 0;
  z-index: 700;
}

.m-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  animation: fadeIn 0.15s ease;
}

.m-sheet {
  position: absolute;
  left: 0;
  right: 0;
  /* --m-kbd-h: on-screen keyboard height (lib/mobile.js), 0 when closed. */
  bottom: var(--m-kbd-h, 0px);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - env(safe-area-inset-top) - 24px - var(--m-kbd-h, 0px));
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-xl);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  animation: m-sheet-in 0.24s var(--ease-out);
  transition: transform 0.18s var(--ease-out);
}

.m-sheet-grip {
  flex-shrink: 0;
  touch-action: none;
  cursor: grab;
}

.m-sheet-handle {
  display: block;
  width: 40px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: var(--border-strong);
}

.m-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 4px 8px 8px 20px;
}

.m-sheet-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.m-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
}

.m-sheet-close:active {
  background: var(--bg-hover);
}

.m-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.m-sheet-action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: none;
  border-radius: var(--radius-xl);
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.m-sheet-action svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.m-sheet-action:active {
  background: var(--bg-hover);
}

.m-sheet-action.danger,
.m-sheet-action.danger svg {
  color: var(--danger);
}

.m-sheet-action:disabled {
  opacity: 0.5;
  cursor: default;
}

.m-sheet-action.active {
  background: var(--accent-subtle);
  color: var(--accent-text);
}

.m-sheet-action.active svg {
  color: var(--accent-text);
}

/* The shell's "More" sheet: every destination the tab bar does not carry,
   then the other DigitalCandy products. */
.m-more-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.m-sheet-section {
  margin: var(--space-3) var(--space-4) var(--space-1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.m-sheet-divider {
  height: 1px;
  margin: var(--space-2) var(--space-4);
  background: var(--border);
}

@keyframes m-sheet-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .m-sheet,
  .m-sheet-backdrop {
    animation: none;
    transition: none;
  }
}

@media (min-width: 768px) {
  .m-only { display: none !important; }
}

/* ------------------------------------------------------------------
 * Phone layout
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  :root {
    /* Compact bar, tall enough for the mark over the product's name (logo.css,
       .dc-product-lockup); the status-bar inset (viewport-fit=cover) is part
       of it, so everything offset by --nav-height clears both. */
    --nav-height: calc(64px + env(safe-area-inset-top));
    --crumbs-height: 48px;
    --bottom-nav-height: 60px;
    --m-topbar-h: var(--nav-height);
    --m-tabbar-h: 0px;
    --m-sticky-h: 0px;
    --m-sticky-safe: env(safe-area-inset-bottom);
    --m-gutter-l: max(16px, env(safe-area-inset-left));
    --m-gutter-r: max(16px, env(safe-area-inset-right));
  }

  /* Signed-in pages carry the tab bar; the sticky bar then sits on it and
     needs no inset of its own. */
  .app-container:has(> .mobile-bottom-nav) {
    --m-tabbar-h: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    --m-sticky-safe: 0px;
  }

  .app-container:has(.mobile-sticky-actions) {
    --m-sticky-h: 73px;
  }

  .app-container {
    min-height: 100dvh;
    overflow-x: clip;
  }

  .m-hide { display: none !important; }

  /* ---------------- Compact top bar ---------------- */
  .topnav {
    padding: env(safe-area-inset-top) var(--m-gutter-r) 0 var(--m-gutter-l);
    gap: var(--space-2);
    /* Above the tab bar (300): the bar is a stacking context, and the sheets
       inside it (avatar menu, notifications) must cover the tab bar. Below
       modals (500). */
    z-index: 400;
    /* Solid, not blurred: a backdrop-filter would become the containing block
       for the position:fixed sheets inside the bar (avatar menu,
       notifications), pinning them to the bar. */
    background: var(--bg-elevated);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .topnav-logo {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
  }

  .topnav-logo .dc-logo__word,
  .view-mode-pills,
  .theme-toggle-btn {
    /* Lockup → `dc` monogram; the Dashboard / AI Workbench switch and the theme
       toggle live in the tab bar and the "More" sheet. */
    display: none;
  }

  .topnav-actions {
    margin-left: auto;
    gap: 2px;
  }

  /* Search collapses to its icon. */
  .cmd-k-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-secondary);
  }

  .cmd-k-btn > span {
    display: none;
  }

  .cmd-k-btn svg {
    width: 20px;
    height: 20px;
  }

  /* The cart returns to the top bar (style.css hides it at <=768px, where the
     tablet bar carries it). */
  .cart-nav-btn {
    display: flex;
  }

  .topnav-actions .nav-icon-btn,
  .topnav-actions .lang-dropdown-trigger {
    width: 44px;
    height: 44px;
  }

  .topnav-actions .nav-icon-btn svg,
  .topnav-actions .lang-dropdown-trigger svg {
    width: 20px;
    height: 20px;
  }

  /* The cart's badges sit on its icon from the tablet bar down (style.css, at
     1040px and below); the phone's 44px button holds the count inside it. */
  .cart-nav-btn .cart-count-badge {
    top: 4px;
    right: 2px;
  }

  /* Under 360px the name under the mark and four 44px controls do not fit
     (the row would run past a 320px screen): the cart steps back to the More
     sheet, the one control the bar holds that has a second way in
     (NAV_MODEL.phoneExtras). */
  @media (max-width: 359px) {
    .topnav .cart-nav-btn {
      display: none;
    }
  }

  /* Avatar menu entries the registrar slots into <dc-user-chrome>. */
  dc-user-chrome .dropdown-item {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
    border: none;
    background: none;
    border-radius: 6px;
    color: var(--text-primary);
  }

  /* ---------------- Breadcrumb title row ---------------- */
  .product-crumbs {
    height: var(--crumbs-height);
    min-height: 0;
    padding: 0 var(--m-gutter-r) 0 var(--m-gutter-l);
    --dc-crumbs-font-size: 17px;
    --dc-crumbs-current-weight: 600;
    --dc-crumbs-chip-bg: var(--bg-surface);
    --dc-crumbs-chip-border: var(--border);
    --dc-crumbs-chip-color: var(--text-secondary);
  }

  .product-crumbs dc-breadcrumbs {
    flex: 1;
    min-width: 0;
  }

  /* No back chip: the row would only repeat the page's own heading. It
     collapses rather than hides, keeping the margin that clears the top bar. */
  .app-container:has(dc-breadcrumbs[data-no-back]) {
    --crumbs-height: 0px;
  }

  .product-crumbs:has(> dc-breadcrumbs[data-no-back]) {
    overflow: hidden;
  }

  /* ---------------- Domains workspace tabs ---------------- */
  .workspace-subnav {
    top: var(--nav-height);
    padding: 0 var(--m-gutter-r) 0 var(--m-gutter-l);
    gap: var(--space-4);
    /* style.css paints it with --bg-base, which no theme defines, so the
       page scrolled visibly through the sticky bar. */
    background: var(--bg-page);
    scrollbar-width: none;
  }

  .workspace-subnav::-webkit-scrollbar {
    display: none;
  }

  .workspace-subnav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
  }

  /* ---------------- Page frame ---------------- */
  .page-content {
    padding: var(--space-4) var(--m-gutter-r)
      calc(var(--bottom-nav-clearance) + var(--m-sticky-h)) var(--m-gutter-l);
  }

  /* A page that wraps itself in .page-content (cart, watchlist) inside the
     shell's <main class="page-content"> would get the top-bar margin and the
     gutters twice: a ~70px gap under the top bar and a doubled inset. */
  .page-content .page-content {
    margin-top: 0;
    padding: 0;
    min-height: 0;
  }

  /* ---------------- Bottom tab bar ----------------
     Same metrics in all three apps (escrow, marketplace): 60px + the home
     indicator inset, equal columns, 22px icon in a pill, 11px labels, nav
     background + blur, never hidden on scroll. */
  .mobile-bottom-nav {
    /* style.css's base `.mobile-bottom-nav { display: none }` comes after its
       own <=768px `display: flex`, so the bar never showed on a phone. */
    display: flex;
    z-index: 300;
    padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom)
      max(4px, env(safe-area-inset-left));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .bottom-nav-link {
    gap: 2px;
    min-height: 48px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Active indicator: a pill behind the icon. */
  .bottom-nav-link .bottom-nav-icon {
    padding: 4px 16px;
    border-radius: var(--radius-full);
    transition: background-color 0.15s;
  }

  .bottom-nav-link .bottom-nav-icon svg {
    width: 22px;
    height: 22px;
  }

  .bottom-nav-link.active .bottom-nav-icon,
  .bottom-nav-link:active .bottom-nav-icon {
    background: var(--accent-subtle);
  }

  .bottom-nav-label {
    font-size: 11px;
    font-weight: 500;
    /* style.css sets line-height 1 with overflow hidden, clipping descenders. */
    line-height: 1.3;
  }

  .bottom-nav-link.active .bottom-nav-label {
    font-weight: 600;
  }

  /* ---------------- Sticky action bar (pages opt in) ----------------
     !important: the action rows pages tag carry inline layout styles
     (padding, border, margin, justify-content) meant for the desktop flow. */
  .mobile-sticky-actions {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--m-tabbar-h) !important;
    z-index: 250 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: var(--space-2) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px var(--m-gutter-r) calc(12px + var(--m-sticky-safe))
      var(--m-gutter-l) !important;
    background: var(--bg-elevated) !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06) !important;
  }

  .mobile-sticky-actions > .btn,
  .mobile-sticky-actions > button,
  .mobile-sticky-actions > a {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    justify-content: center;
    font-size: 16px;
  }

  /* Anything else in the bar (a total, a select, a count) takes the room
     it needs and the actions share the rest. */
  .mobile-sticky-actions > :not(.btn):not(button):not(a) {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mobile-sticky-actions > select {
    min-height: 48px;
  }

  /* ---------------- Utilities ---------------- */
  .m-kebab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
  }

  .m-kebab:active {
    background: var(--bg-hover);
  }

  /* ---------------- Forms: 16px inputs (no iOS focus zoom) ---------------- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px;
  }

  .btn:active:not(:disabled) {
    filter: brightness(0.94);
  }

  /* ---------------- Modal → bottom sheet ---------------- */
  .modal-overlay {
    align-items: flex-end;
    /* Lift the sheet above the on-screen keyboard (lib/mobile.js). */
    padding: 0 0 var(--m-kbd-h, 0px);
    backdrop-filter: none;
  }

  .modal,
  .modal-lg,
  .modal-sm {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - env(safe-area-inset-top) - 24px - var(--m-kbd-h, 0px));
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    animation: m-sheet-in 0.24s var(--ease-out);
    transition: transform 0.18s var(--ease-out);
  }

  .modal::before,
  .slide-panel::before,
  .dropdown-menu::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: var(--border-strong);
  }

  .modal-header,
  .slide-panel-header {
    padding: 4px 8px 10px 20px;
    /* Swipe down here to close (lib/mobile.js installPhoneOverlayGestures). */
    touch-action: none;
  }

  .modal-title {
    font-size: 17px;
  }

  .modal-close {
    width: 44px;
    height: 44px;
  }

  .modal-body {
    padding: var(--space-4) 20px;
    overscroll-behavior: contain;
  }

  .modal-footer,
  .slide-panel-footer {
    flex-wrap: wrap;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  }

  .modal-footer > .btn,
  .slide-panel-footer > .btn {
    flex: 1 1 0;
    min-height: 48px;
    justify-content: center;
  }

  /* ---------------- SlidePanel → tall bottom sheet ---------------- */
  .slide-panel {
    top: auto;
    left: 0;
    width: 100%;
    max-width: none;
    bottom: var(--m-kbd-h, 0px);
    max-height: calc(100dvh - env(safe-area-inset-top) - 24px - var(--m-kbd-h, 0px));
    border-left: 0;
    border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    animation: m-sheet-in 0.24s var(--ease-out);
    transition: transform 0.18s var(--ease-out);
  }

  .slide-panel-body {
    padding: var(--space-4) 20px;
    overscroll-behavior: contain;
  }

  /* ---------------- Dropdown menus → action sheet ----------------
     Dropdown (lib/components.js), the notifications feed and other
     .dropdown-menu panels. The inline position the Dropdown computes for
     desktop is overridden; the scrim is a spread shadow, and the tap that
     lands on it closes the menu without reaching the page underneath
     (installPhoneOverlayGestures). */
  .dropdown-menu {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: auto !important;
    min-width: 0;
    max-height: min(75dvh, 640px);
    padding: 0 8px env(safe-area-inset-bottom);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 0 0 100vmax var(--bg-overlay), var(--shadow-xl);
    z-index: 450;
    overscroll-behavior: contain;
    animation: m-sheet-in 0.22s var(--ease-out);
  }

  .dropdown-menu::before {
    margin-bottom: 8px;
  }

  .dropdown-menu .dropdown-item {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--space-4);
    font-size: 16px;
    border-radius: var(--radius-xl);
  }

  /* ---------------- Command palette ----------------
     Pinned to the top so the on-screen keyboard never covers the input; the
     strip of backdrop below it closes it on tap. */
  .cmd-palette-overlay {
    padding: calc(8px + env(safe-area-inset-top)) 8px 0;
    backdrop-filter: none;
  }

  .cmd-palette {
    display: flex;
    flex-direction: column;
    max-width: none;
    max-height: min(560px, 62dvh);
    border-radius: 16px;
  }

  .cmd-search-wrap {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-4);
    min-height: 56px;
  }

  .cmd-results {
    flex: 1;
    min-height: 0;
    max-height: none;
    overscroll-behavior: contain;
  }

  .cmd-item {
    min-height: 52px;
  }

  .cmd-footer,
  .cmd-kbd {
    display: none;
  }

  /* ---------------- Toasts ---------------- */
  .toast-container {
    left: var(--m-gutter-l);
    right: var(--m-gutter-r);
    bottom: calc(var(--m-tabbar-h) + var(--m-sticky-h) + 12px + var(--m-sticky-safe));
  }

  .toast {
    max-width: none;
  }

  /* ---------------- Auth pages (login, register, forgot password) -------- */
  .auth-page {
    min-height: 100dvh;
    align-items: flex-start;
    padding: calc(var(--space-8) + env(safe-area-inset-top)) var(--m-gutter-r)
      calc(var(--space-8) + env(safe-area-inset-bottom)) var(--m-gutter-l);
  }

  .auth-card {
    padding: var(--space-2) 0;
    border: none;
    background: transparent;
  }

  .auth-card .btn {
    min-height: 48px;
    font-size: 16px;
  }

  .auth-card .form-input,
  .auth-card .form-select {
    min-height: 48px;
  }

  .auth-card input[type="checkbox"] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin: 0;
  }

  .auth-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .modal,
  .slide-panel,
  .dropdown-menu {
    animation: none;
    transition: none;
  }

  .bottom-nav-link .bottom-nav-icon {
    transition: none;
  }
}

/* ------------------------------------------------------------------
 * Exactly 768px (iPad portrait) — pre-existing bug fix. style.css hides the
 * header's menu button and cart icon at <=768px for a bottom bar that its own
 * cascade never shows, so at exactly 768px no navigation rendered at all. This
 * width gets the 769px header back (menu button + cart icon); 769px and up are
 * untouched, and <=767px uses the phone shell above.
 * ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 768px) {
  .topnav-menu-btn,
  .cart-nav-btn {
    display: flex;
  }

  .page-content {
    padding-bottom: var(--space-6);
  }
}