/* Participation Intelligence — Mobile Optimization (Phase 1) */

/* ============================================
   MOBILE-FIRST RESPONSIVE STYLES
   Breakpoints: Mobile < 768px | Tablet 768-1024px | Desktop > 1024px
   ============================================ */

/* Touch device detection - hide custom cursor */
@media (pointer: coarse) {
  #cur, #cur-r {
    display: none !important;
  }
  body {
    cursor: auto !important;
  }
}

/* ============================================
   TABLET & MOBILE (< 1024px)
   ============================================ */

@media (max-width: 1024px) {
  /* Navigation - show hamburger, hide desktop nav */
  .nav-links {
    display: none !important;
  }
  
  .nav-cta {
    display: none !important;
  }
  
  /* Hide desktop nav in header (viewer pages) */
  .pi-header nav ul.pi-nav {
    display: none !important;
  }
  
  .pi-header nav {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .mobile-menu-btn {
    display: block !important;
    font-size: 24px;
    color: var(--cr);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }
  
  /* Mobile menu overlay */
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 7, 15, 0.98);
    backdrop-filter: blur(20px);
    z-index: 300;
    display: flex;
    flex-direction: column;
    padding: 80px 32px 32px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  
  .mobile-menu-overlay.active {
    transform: translateX(0);
  }
  
  .mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    color: var(--cr);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }
  
  .mobile-menu-links {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
  }
  
  .mobile-menu-links li {
    margin-bottom: 24px;
  }
  
  .mobile-menu-links a {
    font-family: 'DM Mono', monospace;
    font-size: 24px;
    font-weight: 600;
    color: var(--mu);
    text-decoration: none;
    letter-spacing: 0.08em;
    transition: color 0.2s;
    display: block;
    padding: 12px 0;
  }
  
  .mobile-menu-links a:hover,
  .mobile-menu-links a.active {
    color: var(--gold);
  }
  
  .mobile-menu-cta {
    margin-top: auto;
  }
  
  .mobile-menu-cta .btn-g {
    width: 100%;
    text-align: center;
    display: block;
  }
  
  /* Hero section - stack columns */
  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto;
  }
  
  .hero-l {
    padding: 80px 32px 40px !important;
  }
  
  .hero-r {
    min-height: 400px;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  
  /* Hero typography */
  .hero-hed {
    font-size: clamp(32px, 8vw, 52px) !important;
  }
  
  .hero-sub {
    font-size: 15px !important;
  }
  
  /* Hero buttons - stack vertically */
  .hero-acts {
    flex-direction: column;
    gap: 16px !important;
  }
  
  .hero-acts .btn-g,
  .hero-acts .btn-gh {
    width: 100%;
    text-align: center;
  }
  
  /* Revelation section */
  .rev-header {
    padding: 60px 32px 40px !important;
  }
  
  .rev-grid {
    grid-template-columns: 1fr !important;
  }
  
  .rev-card {
    padding: 40px 32px !important;
  }
  
  /* Dashboard section */
  .s-dash {
    padding: 60px 32px !important;
  }
  
  .dash-top {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 20px;
  }
  
  /* Metrics bar - 2 columns on tablet */
  .met-bar {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .mc:last-child {
    grid-column: 1 / -1;
  }
  
  /* Dashboard grid - stack */
  .dash-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Unknown Army section */
  .s-army {
    padding: 60px 32px !important;
  }
  
  .army-intro {
    margin-bottom: 40px !important;
  }
  
  /* Participant cards - 2 columns on tablet */
  .cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  .army-foot {
    flex-direction: column;
    align-items: stretch !important;
    gap: 20px;
  }
  
  .army-foot .btn-g {
    width: 100%;
  }
  
  /* Pipeline section */
  .s-pipe {
    padding: 60px 32px !important;
  }
  
  .pipe-steps {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  
  .pipe-steps::before {
    display: none;
  }
  
  .ps {
    padding: 0 !important;
  }
  
  /* Atlas section */
  .s-atlas {
    grid-template-columns: 1fr !important;
    padding: 60px 32px !important;
    gap: 40px !important;
  }
  
  #ac {
    order: -1;
  }
  
  /* CTA section */
  .s-cta {
    padding: 80px 32px !important;
  }
  
  .cta-acts {
    flex-direction: column !important;
    gap: 16px !important;
  }
  
  .cta-acts .btn-g,
  .cta-acts .btn-gh {
    width: 100%;
  }
  
  /* Footer */
  footer {
    padding: 24px 32px !important;
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  /* Navigation (shared header) */
  nav {
    padding: 16px 24px !important;
  }
  
  .pi-header {
    padding: 16px 24px !important;
  }
  
  /* Graph Controls - Mobile Optimization */
  .controls-wrapper {
    position: sticky !important;
    top: 0;
    z-index: 50;
  }
  
  .controls-content {
    padding: 12px !important;
  }
  
  .control-group {
    margin-bottom: 12px !important;
    width: 100% !important;
  }
  
  .control-label {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  
  #brand-select,
  select {
    width: 100% !important;
    font-size: 14px !important;
    padding: 10px !important;
  }
  
  .checkbox-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  .checkbox-item {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    background: rgba(88, 166, 255, 0.08) !important;
    border: 1px solid rgba(88, 166, 255, 0.2) !important;
    border-radius: 16px !important;
    min-height: 32px !important;
    transition: all 0.2s !important;
  }
  
  .checkbox-item input[type="checkbox"] {
    margin-right: 4px !important;
    width: 14px !important;
    height: 14px !important;
  }
  
  .checkbox-item input[type="checkbox"]:checked {
    accent-color: var(--accent) !important;
  }
  
  /* Compact tier/category controls */
  .control-group:has(#tier-S),
  .control-group:has(#category-observer) {
    margin-bottom: 8px !important;
  }
  
  input[type="range"] {
    width: 100% !important;
  }
  
  .stats {
    font-size: 11px !important;
    gap: 12px !important;
  }
  
  .stat-value {
    font-size: 14px !important;
  }
}

/* ============================================
   MOBILE ONLY (< 768px)
   ============================================ */

@media (max-width: 768px) {
  /* Navigation brand - smaller */
  .nav-orb, .pi-orb {
    width: 20px !important;
    height: 20px !important;
  }
  
  .nav-name, .pi-name {
    font-size: 11px !important;
  }
  
  /* Hero section - tighter spacing */
  .hero-l {
    padding: 60px 24px 32px !important;
  }
  
  .eyebrow {
    font-size: 9px !important;
  }
  
  .eyebrow::before {
    width: 20px !important;
  }
  
  /* Metrics bar - single column on phone */
  .met-bar {
    grid-template-columns: 1fr !important;
  }
  
  .mc:last-child {
    grid-column: auto;
  }
  
  /* Participant cards - single column on phone */
  .cards {
    grid-template-columns: 1fr !important;
  }
  
  /* Table overflow - allow horizontal scroll */
  .at {
    font-size: 12px !important;
  }
  
  .at th,
  .at td {
    padding: 8px 10px !important;
  }
  
  /* Sections - reduce padding */
  .s-rev,
  .s-dash,
  .s-army,
  .s-pipe,
  .s-atlas,
  .s-cta {
    padding: 40px 24px !important;
  }
  
  .rev-header,
  .army-intro {
    padding: 40px 24px 32px !important;
  }
  
  /* Typography - scale down slightly */
  .rev-hed,
  .dash-hed,
  .army-hed,
  .atlas-hed,
  .cta-hed {
    font-size: clamp(28px, 7vw, 44px) !important;
  }
  
  /* Canvas sizing */
  #gc,
  #ac {
    height: 300px !important;
  }
  
  /* Graph legend - smaller */
  .g-legend {
    top: 16px !important;
    right: 16px !important;
    font-size: 8px !important;
  }
  
  .g-ld {
    width: 6px !important;
    height: 6px !important;
  }
  
  /* Stats overlay */
  .g-overlay {
    padding: 16px 20px !important;
  }
  
  .g-stats {
    gap: 16px !important;
    flex-wrap: wrap;
  }
  
  .g-sv {
    font-size: 20px !important;
  }
  
  .g-sl {
    font-size: 8px !important;
  }
  
  /* Graph page - Network Canvas */
  #network-canvas {
    height: 400px !important;
    width: 100% !important;
  }
  
  /* Controls start collapsed on phone to save space */
  .controls-wrapper {
    max-height: 42px !important;
  }
  
  .controls-wrapper:not(.collapsed) {
    max-height: none !important;
  }
  
  .controls-content {
    padding: 8px 12px !important;
  }
  
  /* Reduce header size */
  .controls-header {
    padding: 6px 12px !important;
  }
  
  .controls-title {
    font-size: 13px !important;
  }
  
  .collapse-icon {
    font-size: 16px !important;
  }
  
  /* Sentiment range labels */
  .sentiment-labels,
  .range-labels {
    font-size: 10px !important;
  }
  
  /* Creator/Prophet tables - better mobile scroll */
  .at-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .at {
    min-width: 600px !important;
  }
}

/* ============================================
   DESKTOP DEFAULT (> 1024px)
   ============================================ */

@media (min-width: 1025px) {
  .mobile-menu-btn {
    display: none;
  }
  
  .mobile-menu-overlay {
    display: none;
  }
}

/* ============================================
   TOUCH IMPROVEMENTS
   ============================================ */

/* Compact pill-style checkboxes for mobile */
@media (max-width: 768px) {
  label.checkbox-item {
    padding: 5px 10px !important;
    background: rgba(88, 166, 255, 0.06) !important;
    border: 1px solid rgba(88, 166, 255, 0.15) !important;
    border-radius: 14px !important;
    cursor: pointer;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 11px !important;
    gap: 4px !important;
    white-space: nowrap;
  }
  
  label.checkbox-item:has(input:checked) {
    background: rgba(88, 166, 255, 0.2) !important;
    border-color: rgba(88, 166, 255, 0.5) !important;
    font-weight: 600;
  }
  
  label.checkbox-item:active {
    transform: scale(0.95);
  }
  
  label.checkbox-item input[type="checkbox"] {
    margin: 0 !important;
    width: 12px !important;
    height: 12px !important;
  }
  
  /* Tighter control groups */
  .control-group {
    margin-bottom: 8px !important;
  }
  
  .control-label {
    font-size: 10px !important;
    margin-bottom: 4px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
  }
  
  /* More compact checkbox groups */
  .checkbox-group {
    gap: 4px !important;
  }
  
  /* Range slider - larger thumb for touch */
  input[type="range"] {
    height: 32px !important;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
  }
  
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
  }
  
  input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
  }
  
  /* Select dropdowns - larger touch target */
  select {
    min-height: 44px !important;
    background-size: 12px;
  }
  
  /* Buttons - full width and larger */
  button:not(.mobile-menu-btn):not(.mobile-menu-close) {
    min-height: 44px !important;
    padding: 12px 20px !important;
  }
}

/* ============================================
   VIEWER PAGE SPECIFIC FIXES
   ============================================ */

@media (max-width: 1024px) {
  /* Feed page - card layout for entries */
  .feed-entry {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  
  /* Creators/Prophet - horizontal scroll indicator */
  .table-scroll-hint {
    display: block !important;
    text-align: center;
    font-size: 11px;
    color: var(--muted);
    padding: 8px;
    background: rgba(88, 166, 255, 0.05);
    margin-bottom: 8px;
    border-radius: 4px;
  }
  
  /* Modal - full screen on mobile */
  .modal {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  .modal-overlay {
    padding: 0 !important;
  }
  
  .modal-close {
    top: 12px !important;
    right: 12px !important;
    font-size: 28px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Prevent horizontal overflow on all pages */
@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }
  
  * {
    max-width: 100vw;
  }
  
  /* Ensure tables don't break layout */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ============================================
   EXTRA COMPACT GRAPH CONTROLS (PHONE)
   ============================================ */

@media (max-width: 768px) {
  /* Sentiment range - more compact */
  .sentiment-control {
    margin-bottom: 8px !important;
  }
  
  .range-container {
    margin: 6px 0 !important;
  }
  
  .sentiment-labels,
  .range-labels {
    font-size: 9px !important;
    margin-top: 2px !important;
  }
  
  /* Stats in header - more compact */
  .controls-header .stats {
    font-size: 10px !important;
    gap: 8px !important;
  }
  
  .controls-header .stat-value {
    font-size: 13px !important;
  }
  
  /* Brand selector - reduce height */
  #brand-select {
    padding: 8px !important;
    font-size: 13px !important;
    min-height: 36px !important;
  }
  
  /* Horizontal scroll for tier pills if needed */
  .checkbox-group {
    flex-wrap: wrap !important;
    max-height: 70px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* For very small phones (< 375px) */
@media (max-width: 375px) {
  label.checkbox-item {
    font-size: 10px !important;
    padding: 4px 8px !important;
    min-height: 28px !important;
  }
  
  .control-label {
    font-size: 9px !important;
  }
  
  .checkbox-group {
    gap: 3px !important;
  }
}