/* StikDex v0.04 · Part 1
   Reusable mobile design foundation. Desktop structure is intentionally untouched. */

:root {
  --v004-safe-top: max(env(safe-area-inset-top, 0px), var(--stik-safe-top, 0px));
  --v004-safe-right: max(env(safe-area-inset-right, 0px), var(--stik-safe-right, 0px));
  --v004-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--stik-safe-bottom, 0px));
  --v004-safe-left: max(env(safe-area-inset-left, 0px), var(--stik-safe-left, 0px));
  --v004-motion-fast: 140ms;
  --v004-motion-normal: 220ms;
  --v004-motion-ease: cubic-bezier(.2,.8,.2,1);
}

/* Reusable component primitives are inert outside the mobile layout. */
.v004-mobile-card,
.v004-mobile-field,
.v004-mobile-state,
.v004-modal {
  box-sizing: border-box;
}

@media (max-width:760px), (pointer:coarse) and (max-width:960px) and (max-height:600px) {
  :root {
    color-scheme: dark;
    --v004-bg: #05070b;
    --v004-surface: #0d1118;
    --v004-surface-raised: #141a23;
    --v004-surface-soft: #1b222d;
    --v004-text: #f7f8fa;
    --v004-muted: #a7b0bd;
    --v004-border: rgba(255,255,255,.12);
    --v004-border-strong: rgba(255,255,255,.2);
    --v004-accent: #ed3148;
    --v004-accent-strong: #ff4058;
    --v004-accent-soft: rgba(237,49,72,.14);
    --v004-success: #29ce72;
    --v004-pending: #f0c94e;
    --v004-missing: #f05a68;
    --v004-info: #67b8f5;
    --v004-radius-sm: 10px;
    --v004-radius-md: 14px;
    --v004-radius-lg: 19px;
    --v004-radius-xl: 24px;
    --v004-space-1: 4px;
    --v004-space-2: 8px;
    --v004-space-3: 12px;
    --v004-space-4: 16px;
    --v004-space-5: 20px;
    --v004-space-6: 24px;
    --v004-touch: 48px;
    --v004-shadow: 0 18px 48px rgba(0,0,0,.38);
    --v004-font-display: clamp(28px,8.5vw,38px);
    --v004-font-title: clamp(20px,6vw,27px);
    --v004-font-heading: 17px;
    --v004-font-body: 14px;
    --v004-font-meta: 11px;
  }

  body:not([data-theme="dark"]) {
    color-scheme: light;
    --v004-bg: #ece9e4;
    --v004-surface: #f8f6f2;
    --v004-surface-raised: #ffffff;
    --v004-surface-soft: #e8e4de;
    --v004-text: #171a1f;
    --v004-muted: #626b76;
    --v004-border: rgba(25,30,38,.14);
    --v004-border-strong: rgba(25,30,38,.24);
    --v004-accent-soft: rgba(210,36,57,.11);
    --v004-shadow: 0 16px 38px rgba(35,31,27,.14);
  }

  html {
    background: var(--v004-bg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--pocket-header-height, 76px) + var(--v004-safe-top));
  }

  body {
    min-width: 280px;
    background: var(--v004-bg);
    color: var(--v004-text);
    font-size: var(--v004-font-body);
    line-height: 1.45;
    -webkit-tap-highlight-color: transparent;
  }

  .topbar {
    padding-top: calc(10px + var(--v004-safe-top))!important;
    padding-left: max(13px,var(--v004-safe-left))!important;
    padding-right: max(13px,var(--v004-safe-right))!important;
  }

  .view {
    padding-left: max(11px,var(--v004-safe-left))!important;
    padding-right: max(11px,var(--v004-safe-right))!important;
  }

  .v004-mobile-display { margin: 0; font-size: var(--v004-font-display); font-weight: 950; line-height: 1; letter-spacing: -.035em; }
  .v004-mobile-title { margin: 0; font-size: var(--v004-font-title); font-weight: 920; line-height: 1.08; letter-spacing: -.025em; }
  .v004-mobile-heading { margin: 0; font-size: var(--v004-font-heading); font-weight: 900; line-height: 1.2; }
  .v004-mobile-body { margin: 0; font-size: var(--v004-font-body); line-height: 1.5; }
  .v004-mobile-meta { margin: 0; color: var(--v004-muted); font-size: var(--v004-font-meta); font-weight: 750; line-height: 1.35; }

  .v004-mobile-stack { display: grid; gap: var(--v004-space-3); }
  .v004-mobile-stack--tight { gap: var(--v004-space-2); }
  .v004-mobile-stack--roomy { gap: var(--v004-space-5); }

  .v004-mobile-card,
  .home-stat-card,
  .home-panel,
  .column,
  .binder-pocket,
  .pending-order-card,
  .play-workflow-step {
    border-color: var(--v004-border)!important;
    border-radius: var(--v004-radius-lg)!important;
  }

  .v004-mobile-card {
    display: grid;
    gap: var(--v004-space-3);
    padding: var(--v004-space-4);
    border: 1px solid var(--v004-border);
    background: var(--v004-surface);
    color: var(--v004-text);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }

  .v004-mobile-button,
  .action-btn,
  .nav-btn,
  .jump-btn,
  .filter-btn,
  .home-cta,
  .share-action-row button,
  .play-template-actions button {
    min-height: var(--v004-touch);
    border-radius: var(--v004-radius-md)!important;
    font-weight: 900;
    touch-action: manipulation;
  }

  .v004-mobile-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v004-space-2);
    padding: 0 var(--v004-space-4);
    border: 1px solid var(--v004-border);
    background: var(--v004-surface-raised);
    color: var(--v004-text);
  }

  .v004-mobile-button--primary {
    border-color: color-mix(in srgb,var(--v004-accent) 72%,white 28%);
    background: linear-gradient(135deg,var(--v004-accent-strong),#b8142c);
    color: #fff;
  }

  .v004-mobile-icon-button,
  .icon-btn,
  .menu-btn {
    width: var(--v004-touch);
    min-width: var(--v004-touch);
    min-height: var(--v004-touch);
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: var(--v004-radius-md)!important;
    touch-action: manipulation;
  }

  .v004-mobile-field,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea {
    width: 100%;
    min-height: var(--v004-touch);
    border: 1px solid var(--v004-border-strong)!important;
    border-radius: var(--v004-radius-md)!important;
    background: var(--v004-surface-raised)!important;
    color: var(--v004-text)!important;
    font-size: 16px!important;
  }

  textarea { min-height: 96px; padding: 12px; resize: vertical; }
  input::placeholder,textarea::placeholder { color: color-mix(in srgb,var(--v004-muted) 82%,transparent); opacity: 1; }
  input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible {
    outline: 3px solid color-mix(in srgb,var(--v004-accent) 72%,white 28%)!important;
    outline-offset: 2px!important;
  }

  .v004-mobile-search,
  .search-wrap,
  .inline-search,
  .deal-quick-search-shell {
    min-width: 0;
  }

  .v004-mobile-search { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--v004-space-2); }
  .v004-mobile-search-results,
  .search-results {
    max-height: min(48dvh,420px);
    border-color: var(--v004-border)!important;
    border-radius: var(--v004-radius-lg)!important;
    background: var(--v004-surface-raised)!important;
    box-shadow: var(--v004-shadow)!important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .v004-status { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 900; }
  .v004-status--binder { border-color: color-mix(in srgb,var(--v004-success) 48%,transparent); background: color-mix(in srgb,var(--v004-success) 15%,transparent); color: var(--v004-success); }
  .v004-status--pending { border-color: color-mix(in srgb,var(--v004-pending) 48%,transparent); background: color-mix(in srgb,var(--v004-pending) 15%,transparent); color: var(--v004-pending); }
  .v004-status--needed { border-color: color-mix(in srgb,var(--v004-missing) 48%,transparent); background: color-mix(in srgb,var(--v004-missing) 15%,transparent); color: var(--v004-missing); }

  .v004-progress,
  .progress-bar,
  .final-artwork-progress-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px!important;
    background: color-mix(in srgb,var(--v004-muted) 24%,transparent)!important;
  }

  .v004-progress > span { display: block; width: var(--progress,0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--v004-accent),var(--v004-accent-strong)); transition: width var(--v004-motion-normal) var(--v004-motion-ease); }

  .v004-selected,
  [aria-selected="true"],
  .filter-btn.active,
  .pocket-nav button.active {
    border-color: color-mix(in srgb,var(--v004-accent) 60%,var(--v004-border))!important;
    background: var(--v004-accent-soft)!important;
    color: color-mix(in srgb,var(--v004-accent-strong) 80%,white 20%)!important;
  }

  .v004-mobile-state {
    min-height: 128px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--v004-space-2);
    padding: var(--v004-space-5);
    border: 1px dashed var(--v004-border-strong);
    border-radius: var(--v004-radius-lg);
    background: var(--v004-surface);
    color: var(--v004-muted);
    text-align: center;
  }

  .v004-mobile-state--error { border-style: solid; border-color: color-mix(in srgb,var(--v004-missing) 48%,transparent); color: var(--v004-missing); }
  .v004-mobile-spinner { width: 26px; height: 26px; border: 3px solid color-mix(in srgb,var(--v004-muted) 24%,transparent); border-top-color: var(--v004-accent); border-radius: 50%; animation: v004-spin .75s linear infinite; }

  /* Adaptive centered modal primitives for current and later v0.04 workflows. */
  .v004-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: calc(12px + var(--v004-safe-top)) max(12px,var(--v004-safe-right)) calc(12px + var(--v004-safe-bottom)) max(12px,var(--v004-safe-left));
    background: rgba(0,0,0,.72);
    overscroll-behavior: contain;
  }

  .v004-modal {
    width: min(100%,560px);
    max-height: calc(100dvh - var(--v004-safe-top) - var(--v004-safe-bottom) - 24px);
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    overflow: hidden;
    border: 1px solid var(--v004-border-strong);
    border-radius: var(--v004-radius-xl);
    background: var(--v004-surface);
    color: var(--v004-text);
    box-shadow: var(--v004-shadow);
  }

  .v004-modal--compact { width: min(100%,380px); }
  .v004-modal--medium { width: min(100%,560px); }
  .v004-modal--complex { width: min(100%,720px); height: min(88dvh,820px); }
  .v004-modal__header,.v004-modal__footer { padding: var(--v004-space-4); }
  .v004-modal__header { border-bottom: 1px solid var(--v004-border); }
  .v004-modal__footer { border-top: 1px solid var(--v004-border); padding-bottom: calc(var(--v004-space-4) + var(--v004-safe-bottom)); }
  .v004-modal__body { min-height: 0; overflow: auto; padding: var(--v004-space-4); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

  .pending-order-modal,
  .binder-choice-sheet,
  .missing-list-modal,
  .share-manager-modal,
  .play-template-submodal {
    place-items: center!important;
    padding: calc(12px + var(--v004-safe-top)) max(12px,var(--v004-safe-right)) calc(12px + var(--v004-safe-bottom)) max(12px,var(--v004-safe-left))!important;
    overscroll-behavior: contain;
  }

  .pending-order-dialog,
  .binder-choice-panel,
  .missing-list-panel,
  .share-manager-panel,
  .play-template-subpanel,
  .play-template-subpanel.editor {
    width: min(100%,680px)!important;
    max-height: calc(100dvh - var(--v004-safe-top) - var(--v004-safe-bottom) - 24px)!important;
    border-radius: var(--v004-radius-xl)!important;
  }

  .pending-order-dialog.compact,
  .final-artwork-move-dialog { width: min(100%,400px)!important; }
  .share-manager-panel,.pending-order-creator-dialog,.pending-arrival-dialog { height: min(88dvh,820px)!important; }

  .pocket-nav,
  .pocket-sheet,
  .mobile-panel,
  .share-manager-panel,
  .pending-order-dialog,
  .binder-choice-panel {
    transition: opacity var(--v004-motion-fast) var(--v004-motion-ease), border-color var(--v004-motion-fast) var(--v004-motion-ease), background-color var(--v004-motion-fast) var(--v004-motion-ease);
  }
}

/* Touch capability improves control comfort without forcing the phone layout. */
@media (min-width: 761px) and (pointer: coarse) {
  .nav-btn,.action-btn,.jump-btn,.icon-btn,.menu-btn { min-height: 44px; touch-action: manipulation; }
}

@media (hover: none) {
  .icon-btn:hover,.menu-btn:hover,.action-btn:hover,.nav-btn:hover,.jump-btn:hover { filter: none!important; }
}

/* WebKit stability override: visual effects never outrank reliable painting. */
@media (max-width:760px), (pointer:coarse) and (max-width:960px) and (max-height:600px) {
  .ios-webkit .pocket-nav,
  .ios-webkit .pocket-sheet-backdrop,
  .ios-webkit .mobile-sheet,
  .ios-webkit .share-mode-selector,
  .ios-webkit .pending-selection-bar,
  .ios-webkit .play-template-submodal {
    -webkit-backdrop-filter: none!important;
    backdrop-filter: none!important;
  }

  .ios-webkit .card,
  .ios-webkit .pocket-nav button,
  .ios-webkit .v004-modal {
    will-change: auto!important;
  }
}

@keyframes v004-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  :root { --v004-motion-fast: 0ms; --v004-motion-normal: 0ms; }
  .v004-mobile-spinner { animation: none!important; border-top-color: currentColor; }
  .v004-progress > span,
  .pocket-nav,
  .pocket-sheet,
  .mobile-panel,
  .share-manager-panel,
  .pending-order-dialog,
  .binder-choice-panel { transition: none!important; scroll-behavior: auto!important; }
}