/* ============================================================
   Responsive — Echoes of the Earth
   Breakpoints: 320 | 375 | 480 | 768 | 1024 | 1440
   ============================================================ */

*{-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

/* ==========================================================
   ≤ 320px  —  Very small phones
   ========================================================== */
@media (max-width:320px){

  /* Topbar — brand only, actions move to bottom bar */
  #topbar{padding:10px 12px;}
  #topbar-actions{display:none;}
  .brand-icon{width:20px;height:20px;}
  .brand-name{font-size:14px;}

  /* Bottom bar — visible */
  .bottom-bar{display:flex;}

  /* Buttons — compact, icon-only where possible */
  .btn-primary{padding:8px 12px;font-size:12px;gap:5px;}
  .btn-primary svg{width:14px;height:14px;}
  .btn-primary span.btn-label{display:none;}
  .btn-outline{padding:7px 10px;font-size:12px;gap:5px;}
  .btn-outline svg{width:14px;height:14px;}
  .btn-round{width:34px;height:34px;}
  .btn-round svg{width:16px;height:16px;}

  /* User chip */
  .user-chip-btn{padding:4px 8px 4px 4px;gap:6px;}
  .user-chip-btn img{width:24px;height:24px;}
  #userName{font-size:12px;display:none;}
  .user-menu{min-width:160px;padding:4px;}
  .user-menu-item{padding:8px 10px;font-size:12px;}

  /* Modals */
  .modal-content{padding:16px;width:96vw;border-radius:16px;}
  .modal-content.profile-card{width:96vw;}
  .modal-content.search-card{width:96vw;}
  .modal-content h3{font-size:16px;}
  .modal-content h2{font-size:16px;}
  .close-btn{width:28px;height:28px;font-size:14px;}

  /* Profile */
  .profile-header{gap:10px;margin-bottom:12px;}
  .profile-header-info h2{font-size:15px;}
  .avatar-lg{width:48px;height:48px;}
  .profile-header.small .avatar-lg{width:32px;height:32px;}
  .pf-bio{font-size:12px;margin:4px 0 8px;}
  .muted{font-size:11px;}
  .location-row svg{width:12px;height:12px;}
  .profile-header-actions{gap:6px;}

  /* Links */
  .links-row{gap:6px;margin:8px 0;}
  .links-row a{padding:5px 8px;font-size:11px;}

  /* Stats */
  .stats-row{gap:6px;margin:10px 0;padding:8px 0;}
  .stats-tab{padding:5px 10px;font-size:12px;}
  .stats-tab strong{font-size:13px;}

  /* Posts */
  .posts-list{gap:6px;max-height:min(60vh,240px);}
  .post-text-bubble{padding:8px 10px;font-size:12px;border-radius:6px;}
  .post-bubble-row{gap:6px;}
  .post-delete-btn svg{width:14px;height:14px;}

  /* Search */
  .search-results{grid-template-columns:1fr;max-height:240px;}
  .search-user-card{padding:10px;}
  .search-user-card img{width:32px;height:32px;}
  .search-user-info .name{font-size:12px;}

  /* Form fields */
  .field-label{font-size:11px;margin:10px 0 5px;}
  .field-label:first-of-type{margin-top:2px;}
  .field-group-label{font-size:11px;margin:12px 0 5px;padding-top:8px;}
  .modal-content input,
  .modal-content textarea,
  .modal-content select{padding:10px 12px;font-size:13px;}

  /* Auth */
  .auth-mark{width:36px;height:36px;margin:0 auto 8px;}
  .auth-mark svg{width:20px;height:20px;}
  .google-btn{padding:10px 16px;font-size:13px;gap:8px;margin-top:12px;}
  .google-btn svg{width:16px;height:16px;}

  /* Hover card */
  .hover-card{display:none !important;}

  /* Toast */
  .toast{padding:10px 16px;font-size:12px;max-width:90vw;}
}

/* ==========================================================
   ≤ 375px  —  Standard phones
   ========================================================== */
@media (min-width:321px) and (max-width:375px){

  #topbar{padding:10px 14px;}
  #topbar-actions{display:none;}
  .brand-icon{width:22px;height:22px;}
  .brand-name{font-size:15px;}

  /* Bottom bar — visible */
  .bottom-bar{display:flex;}

  .btn-primary{padding:8px 14px;font-size:12px;gap:5px;}
  .btn-primary svg{width:15px;height:15px;}
  .btn-primary span.btn-label{display:none;}
  .btn-outline{padding:7px 12px;font-size:12px;gap:5px;}
  .btn-outline svg{width:14px;height:14px;}
  .btn-round{width:36px;height:36px;}

  .user-chip-btn{padding:4px 10px 4px 4px;gap:6px;}
  .user-chip-btn img{width:26px;height:26px;}
  #userName{font-size:13px;}

  .modal-content{padding:18px;width:95vw;border-radius:18px;}
  .modal-content.profile-card{width:95vw;}
  .modal-content.search-card{width:95vw;}
  .modal-content h3{font-size:17px;}
  .close-btn{width:28px;height:28px;}

  .profile-header{gap:10px;}
  .avatar-lg{width:52px;height:52px;}
  .profile-header.small .avatar-lg{width:36px;height:36px;}
  #pf-name,.profile-header-info h2{font-size:16px;}
  .pf-bio{font-size:12px;}

  .links-row a{padding:5px 10px;font-size:11px;}
  .stats-row{gap:8px;}
  .stats-tab strong{font-size:14px;}

  .posts-list{gap:7px;max-height:min(65vh,300px);}
  .post-text-bubble{padding:9px 11px;font-size:12px;}

  .field-label{font-size:11px;}
  .modal-content input,
  .modal-content textarea,
  .modal-content select{padding:10px 12px;font-size:13px;}

  .auth-mark{width:40px;height:40px;}
  .google-btn{padding:10px 18px;font-size:13px;}

  .search-results{max-height:260px;}
}

/* ==========================================================
   ≤ 480px  —  Large phones
   ========================================================== */
@media (min-width:376px) and (max-width:480px){

  #topbar{padding:12px 16px;}
  #topbar-actions{display:none;}
  .brand-name{font-size:16px;}

  /* Bottom bar — visible */
  .bottom-bar{display:flex;}

  .btn-primary{padding:9px 16px;font-size:13px;gap:6px;}
  .btn-primary svg{width:16px;height:16px;}
  .btn-primary span.btn-label{display:none;}
  .btn-outline{padding:7px 14px;font-size:12px;gap:6px;}
  .btn-round{width:38px;height:38px;}

  .user-chip-btn{padding:5px 12px 5px 5px;}
  .user-chip-btn img{width:28px;height:28px;}
  #userName{font-size:13px;}

  .modal-content{padding:20px;width:94vw;border-radius:20px;}
  .modal-content.profile-card{width:94vw;}
  .modal-content.search-card{width:94vw;}
  .modal-content h3{font-size:18px;}

  .avatar-lg{width:56px;height:56px;}
  .profile-header.small .avatar-lg{width:40px;height:40px;}
  #pf-name,.profile-header-info h2{font-size:17px;}

  .posts-list{max-height:min(70vh,360px);}
  .post-text-bubble{padding:10px 12px;font-size:13px;}

  .search-results{max-height:300px;}
}

/* ==========================================================
   ≤ 768px  —  Tablets
   ========================================================== */
@media (min-width:481px) and (max-width:768px){

  #topbar{padding:14px 20px;}

  .modal-content{padding:24px;width:480px;max-width:88vw;border-radius:22px;}
  .modal-content.profile-card{width:100%;max-width:88vw;}
  .modal-content.search-card{width:100%;max-width:88vw;}

  .avatar-lg{width:64px;height:64px;}
  #pf-name,.profile-header-info h2{font-size:18px;}

  .posts-list{max-height:min(75vh,420px);}
}

/* ==========================================================
   ≤ 1024px  —  Small desktops / landscape tablets
   ========================================================== */
@media (min-width:769px) and (max-width:1024px){

  .modal-content{width:460px;}
  .modal-content.profile-card{width:820px;max-width:90vw;}
  .modal-content.search-card{width:820px;max-width:90vw;}
  .posts-list{max-height:min(80vh,500px);}
}

/* ==========================================================
   ≥ 1440px  —  Large desktops
   ========================================================== */
@media (min-width:1440px){
  .modal-content{width:460px;}
  .modal-content.profile-card{width:820px;}
  .modal-content.search-card{width:820px;}
  .posts-list{max-height:min(85vh,600px);}
}

/* ==========================================================
   Touch devices
   ========================================================== */
@media (hover:none) and (pointer:coarse){
  .hover-card{display:none !important;}

  .btn-primary{min-height:44px;}
  .btn-outline{min-height:40px;}
  .btn-secondary{min-height:40px;}
  .btn-text{min-height:40px;}
  .btn-round{min-height:40px;min-width:40px;}
  .user-menu-item{min-height:44px;}
  .post-delete-btn{min-height:40px;min-width:40px;}
  .close-btn{min-height:36px;min-width:36px;}

  .modal-content input,
  .modal-content textarea,
  .modal-content select{min-height:44px;font-size:16px;}
}

/* ==========================================================
   Landscape phones
   ========================================================== */
@media (max-height:500px) and (orientation:landscape){
  #topbar{padding:8px 16px;}
  .brand-icon{width:20px;height:20px;}
  .brand-name{font-size:14px;}

  .modal{align-items:flex-start;padding-top:8px;}
  .modal-content{max-height:94vh;padding:16px;border-radius:16px;}
  .posts-list{max-height:min(50vh,220px);}
}

/* ==========================================================
   Safe areas — iPhone notch / Dynamic Island
   ========================================================== */
@supports(padding:max(0px)){
  #topbar{padding-top:max(16px, env(safe-area-inset-top));}
  .toast{bottom:max(28px, env(safe-area-inset-bottom));}
}

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