/* ==========================================================================
   CODE VARIANT — RESPONSIVE DESIGN & ADAPTIVE PATH NAVIGATION
   Mobile & Tablet Strands Reflow
   ========================================================================== */

/* Laptop & Large Tablet (1024px – 1280px) */
@media (max-width: 1280px) {
  .anchor-variant { left: 74%; top: 12%; }
  .anchor-arena { left: 76%; }
  .anchor-builders { left: 74%; bottom: 10%; }
  .anchor-community { right: 76%; }
  .anchor-next { right: 72%; bottom: 10%; }
}

/* Tablet Breakpoint (769px – 1023px) */
@media (max-width: 1023px) {
  .strands-svg {
    opacity: 0.7;
  }

  .origin-center {
    max-width: 360px;
  }

  .anchor-variant { left: 70%; top: 10%; }
  .anchor-arena { left: 72%; }
  .anchor-builders { left: 70%; bottom: 8%; }
  .anchor-community { right: 72%; }
  .anchor-next { right: 68%; bottom: 8%; }

  .branch-content {
    padding: 2.5rem 2rem 4rem;
  }

  .about-editorial-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Mobile Breakpoint (<= 768px) */
@media (max-width: 768px) {
  .site-header {
    height: 56px;
  }

  .header-inner {
    padding: 0 1.25rem;
  }

  .brand-tag {
    display: none;
  }

  .system-nav {
    gap: 0.85rem;
  }

  .nav-item {
    font-size: 0.6875rem;
    padding: 0.25rem 0.4rem;
  }

  /* Map Viewport on Mobile */
  .map-stage {
    padding: 1.25rem 1.25rem 2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2rem;
  }

  /* Center Origin flows at the top of the mobile screen */
  .origin-center {
    position: static;
    transform: none;
    max-width: 100%;
    text-align: left;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
  }

  .origin-title {
    font-size: 2.25rem;
  }

  /* Organic Vertical Flowing Path on Mobile */
  .strands-canvas-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem 0 1.5rem;
    border-left: 1px solid rgba(243, 240, 232, 0.15);
    margin-left: 0.5rem;
    padding-left: 1.25rem;
  }

  .strands-svg {
    display: none; /* Desktop coordinate paths are replaced by the authentic vertical flow */
  }

  .strand-anchor {
    position: static;
    transform: none !important;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(243, 240, 232, 0.08);
  }

  .strand-text-wrap {
    flex: 1;
    margin: 0 0.85rem;
  }

  .strand-align-right {
    text-align: left;
  }

  .strand-symbol-left {
    order: 2;
  }

  .strand-title {
    font-size: 1.2rem;
  }

  .strand-caption {
    font-size: 0.6875rem;
  }

  .map-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding-top: 1rem;
  }

  /* Branch States on Mobile */
  .branch-topbar {
    padding: 0.85rem 1.25rem;
  }

  .branch-content {
    padding: 2rem 1.25rem 4rem;
  }

  .branch-headline {
    font-size: 2.35rem;
  }

  .branch-statement {
    font-size: 1.25rem;
  }

  .pipeline-track {
    overflow-x: auto;
    padding-bottom: 0.75rem;
  }

  .pipeline-step {
    min-width: 60px;
  }

  /* Mobile Tree Veil Adjustment for clear tree view */
  .tree-veil {
    background: linear-gradient(180deg, rgba(11, 12, 13, 0.78) 0%, rgba(11, 12, 13, 0.85) 100%);
  }

  .manifesto-editorial-panel {
    padding: 2.25rem 1.25rem;
  }

  .manifesto-display {
    font-size: 2.5rem;
  }

  /* Functional Branch Components on Mobile */
  .arena-filter-bar {
    gap: 1.25rem;
    padding: 1rem 0;
  }

  .filter-group {
    width: 100%;
  }

  .deliberate-empty-state {
    padding: 1.75rem 0 1.75rem 1.25rem;
  }

  .empty-headline {
    font-size: 1.65rem;
  }

  .functional-form {
    padding: 1.5rem 1.25rem;
  }

  .chip-group {
    gap: 0.5rem;
  }

  .choice-chip {
    padding: 0.45rem 0.85rem;
    font-size: 0.6875rem;
  }

  .profile-detail-row {
    flex-direction: column;
    gap: 0.35rem;
  }

  .profile-detail-label {
    width: auto;
  }

  .plan-result-panel {
    padding: 1.25rem;
  }

  .plan-result-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .sub-tab-bar {
    gap: 1rem;
    overflow-x: auto;
  }

  .sub-tab-btn {
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* V2 Mobile Extensions */
  .modal-content {
    padding: 1.5rem 1.25rem;
  }

  .community-filter-bar {
    gap: 0.5rem;
    padding: 0.85rem 0;
  }

  .need-post-card {
    padding: 1.25rem;
  }

  .need-post-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .need-post-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }

  .need-author-controls {
    width: 100%;
    justify-content: space-between;
  }

  .lab-dimension-step {
    padding-left: 1rem;
  }
}



/* Accessibility: Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .loom-video {
    display: none;
  }

  .env-loom {
    background: radial-gradient(circle at 50% 50%, #171918 0%, #0B0C0D 100%);
  }
}