/* =========================================================
   MOBILE ONLY (≤768px) — keeps desktop clean
   ========================================================= */

/* Baseline: never show mobile UI unless media query enables it */
.mobile-bottom-menu { display: none; }
#mobileModal { display: none; }         /* extra guard; [hidden] also hides */

/* ---------------------------------------------------------
   Debug colors for your 4-block skeleton (optional)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  body.mobile-debug .header         { background: rgba(60, 90, 210, .35); }  /* blue */
  body.mobile-debug .canvas         { background: rgba( 60,190,110, .35); }  /* green */
  body.mobile-debug .utility-footer { background: rgba(210,170, 60, .35); }  /* amber */
  body.mobile-debug .bottom-menu    { background: rgba(210, 80, 80, .35); }  /* red */
}

/* ---------------------------------------------------------
   Global mobile overrides
   --------------------------------------------------------- */
@media (max-width: 768px) {
  /* Hide logo/brand and any header tool groups on mobile */
  /* .brand { display: none !important; }*/
  /* header .header-group { display: none !important; } */
  .brand {
  display:block;
}
.brand-logo {
    width:200px;
}

  /* Hide the desktop sidebar entirely on mobile */
  .sidebar { display: none !important; }

  /* Show mobile bottom bar only on mobile (part of your 4-row layout) */
  .mobile-bottom-menu {
    display: flex;       /* was baseline: none */
    grid-row: 4;
    position: relative;
    z-index: 10;
    width: 100%;
    justify-content: space-around;
    align-items: center;
  }

  /* If the canvas ever overlaps the bottom bar visually, add padding:
     .canvas{ padding-bottom: 88px; }   // keep commented unless needed */

  /* Allow the modal element to exist (still hidden by [hidden]) */
  #mobileModal { display: block; }
  #mobileModal[hidden] { display: none !important; }
}

/* ---------------------------------------------------------
   Mobile Items Modal (title + search + list only)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .mobile-modal {
    position: fixed; inset: 0; z-index: 1200;
  }
  .mobile-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45);
  }
  .mobile-panel {
    position: absolute;
    left: 12px; right: 12px; top: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column;
    background: #1e1e1f;
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0,0,0,.5);
  }

  .mobile-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
  }
  .mobile-panel-header h2 {
    margin: 0; font-size: 18px; font-weight: 700;
  }
  .mobile-close {
    width: 36px; height: 36px; border: none; border-radius: 12px;
    /* background: rgba(255,255,255,.08); color: #fff;*/
    font-size: 22px; line-height: 1;
    color: white;
    background: none !important;
  }

  .mobile-panel-search { padding: 0 16px 10px; }
  .search-wrap { position: relative; }
  #mobileSearch {
    width: 100%; height: 42px; outline: none;
    border: none; border-radius: 12px;
    background: #3a3640; color: #fff;
    padding: 0 40px 0 14px;
  }
  #mobileSearchClear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border: none; border-radius: 10px;
    /* background: rgba(255,255,255,.12); color: #fff;*/
    /* display:none;*/
    color: white;
  }

  /* Modal list host */
  #itemsContainerMobile {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    padding: 0 12px 12px;
  }

  /* Hide logo/duplicate titles/inner bottom menu when the desktop list is moved here */
  #itemsContainerMobile #logoImg,
  #itemsContainerMobile #logoImgModal,
  #itemsContainerMobile #sidebar-title,
  #itemsContainerMobile .bottom-menu {
    display: none !important;
  }
}

/* ---------------------------------------------------------
   Desktop guard (≥769px): ensure mobile UI never shows
   --------------------------------------------------------- */
@media (min-width: 769px) {
  .mobile-bottom-menu { display: none !important; }
  #mobileModal { display: none !important; }
}


/* MOBILE ITEMS BAR: fixed to bottom */
@media (max-width: 768px){
  .mobile-bottom-menu{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    display: flex;              /* ensure visible on mobile */
    justify-content: space-around;
    align-items: center;
    height: 88px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
}
/* Desktop guard */
@media (min-width: 769px){
  .mobile-bottom-menu{ display: none !important; }
}


/* --- Baseline guards: mobile UI hidden unless enabled --- */
.mobile-bottom-menu { display: none; }
#mobileModal { display: none; }

/* ---------- MOBILE (≤768px) ---------- */
@media (max-width: 768px){

  /* Items bar: fixed to bottom */
  .mobile-bottom-menu{
    display: flex;                 /* enable on mobile */
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 88px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: center;
    z-index: 1000;                 /* base layer */
  }

  /* Cable Mode row ABOVE the items bar */
  .utility-footer{
    position: fixed;
    left: 0; right: 0;
    bottom: calc(88px + env(safe-area-inset-bottom) + 8px);  /* sits above items bar */
    height: 56px;                                            /* adjust if your design differs */
    padding: 0 16px;
    display: flex;
    align-items: center;
    z-index: 1001;                  /* above items bar */
    background: transparent;        /* keeps your canvas visible */
    pointer-events: auto;
  }

  /* Prevent canvas content from being hidden behind the two bars */
  .canvas{
    padding-bottom: calc(88px + 56px + 12px);
  }

  /* Modal may exist but stays hidden until JS removes [hidden] */
  #mobileModal{ display: block; }
  #mobileModal[hidden]{ display: none !important; }
}

@media (max-width: 768px){
  .mobile-panel-header h2{ color:#fff; }   /* title in white */
}


/* one place near the top of mobile.css */
:root{ --itemsbar-h: 88px; }           /* your bottom items menu height */

/* Items bar fixed to bottom (on top of modal) */
@media (max-width: 768px){
  .mobile-bottom-menu{
    position: fixed; left:0; right:0; bottom:0;
    height: var(--itemsbar-h);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    z-index: 1000;                      /* ABOVE the modal */
    display:flex; justify-content:space-around; align-items:center;
  }

  /* Modal sits UNDER the items bar so the bar stays clickable */
  .mobile-modal{ position:fixed; inset:0; z-index: 900; }           /* was 1200 */
  .mobile-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }

  /* Stop the panel above the items bar */
  .mobile-panel{
    position:absolute;
    left:12px; right:12px; top:12px;
    bottom: calc(var(--itemsbar-h) + env(safe-area-inset-bottom) + 12px);
    display:flex; flex-direction:column;
    background:#1e1e1f; border-radius:18px; box-shadow:0 16px 48px rgba(0,0,0,.5);
      z-index: 5000;   /* ensure panel is above header/menu */
  }
}

/* Hide BOTH searches on mobile when Custom is active */
@media (max-width: 768px){
  body.is-custom .mobile-panel-search { display: none !important; }  /* modal search */
  body.is-custom .search-bar         { display: none !important; }  /* desktop search area (if present) */
  body.is-custom #search_item,
  body.is-custom #clear-search       { display: none !important; }
}

@media (max-width: 768px){
  body.is-custom .mobile-panel-search { display: none !important; }
}

@media (max-width: 900px) {
  .mobile-panel-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px){
  /* Host just lays out the moved list; it shouldn't scroll */
  #itemsContainerMobile{
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }
  /* Make the REAL list (#itemsContainer) the scroller, same as desktop */
  #itemsContainer{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}


body.modal-open .utility-footer {
  display: none !important;
}


/* Hide Cable Mode row when modal is open (mobile only) */
@media (max-width: 768px){
  body.modal-open .utility-footer {
    display: none !important;
  }
}


/* Mobile: selected state for the bottom menu buttons */
/* Bottom menu: show selected state (match JS) */
@media (max-width: 768px){
  .mobile-bottom-menu .menu-btn.selected,
  .mobile-bottom-menu .menu-btn[aria-selected="true"]{
    opacity: 1;
    outline: 2px solid var(--sbx-accent, #7aa2ff);
    outline-offset: 4px;
    border-radius: 12px;
  }
}


@media (max-width: 768px) {
  #auth-user {
    display: none !important; /* hide desktop version */
  }

  .header-group {
  display: flex;
  gap: 0px;
}
}

/* Mobile: logo (left) + Login (right) on the SAME line */
@media (max-width: 768px) {
  /* hide desktop auth on mobile */
  #auth-user { display: none !important; }

  /* make the brand row a flex header */
  .brand {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .brand-logo {
    max-width: 200px;   /* keep your current size */
    height: auto;
    flex: 0 1 auto;
  }

  /* the mobile auth group inside .brand */
  #mobile-auth-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #mobile-auth-user #login-container { margin: 0; }
  #mobile-auth-user .header-btn { padding: 6px 14px; font-size: 14px; }
}

/* Mobile: make the avatar dropdown float above everything */
@media (max-width: 768px) {
  /* Create a stacking context for the mobile auth wrapper */
  #mobile-auth-user {
    position: relative;
    z-index: 1500; /* above header icons & tool buttons */
  }

  /* Position + elevate the dropdown menu */
  #mobile-auth-user .dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 2000;              /* above bottom bar (1000) and modals (900) */
  }
}


/* Mobile: show ALL header buttons (allow wrap to 2 lines) */
@media (max-width: 768px) {
  .header {
    height: auto !important;         /* allow it to grow */
    display: flex !important;
    flex-wrap: wrap;                  /* buttons can wrap */
    justify-content: flex-start;      /* start at the left */
    align-items: center;
    gap: 8px 10px;                    /* tight spacing */
    padding-left: 0;                  /* remove desktop left padding */
    margin-top: 6px;
  }

  .header-group {
    display: flex !important;
    gap: 8px;
    margin-right: 0 !important;       /* no huge desktop spacing */
  }

  /* slightly smaller buttons on mobile so all fit nicely */
  .header .header-btn {
    width: 32px !important;
    height: 32px !important;
  }
}


/* Mobile: 9 header buttons in 2 rows (5 + 4), compact */
@media (max-width: 768px) {
  .header {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 48px;          /* compact size */
    gap: 8px;
    width: 100%;
    margin: 8px 0;
    padding: 0 8px;
  }

  .header-group {
    display: contents !important;
  }

  .header .header-btn {
    width: 100% !important;
    height: 100% !important;
    min-height: 48px;
    border-radius: 8px;
    background-color: rgba(255,255,255,0.05);
  }

  /* icons inside buttons smaller */
  .header .header-btn img,
  .header .header-btn::before {
    transform: scale(0.8); /* shrink icon look */
  }

  .header .header-btn:nth-child(n+6) {
    grid-column: span 1;
  }
}


/* Mobile: shrink ALL header icons ~20% (ID-level to beat desktop rules) */
@media (max-width: 768px) {
  /* default for most */
  #btn-shoutboard,
  #zoomInBtn,
  #zoomOutBtn,
  #clearCanvasBtn,
  #exportBtn,
  #savePedalboardBtn,
  #btn-share {
    background-size: 48% !important;   /* from 60% → 48% */
  }

  /* ones that had larger desktop sizes */
  #btn-explore,
  #btn-tutorial {
    background-size: 56% !important;   /* from 70% → 56% */
  }
}


/* Mobile: make the 9-button header float over the canvas */
@media (max-width: 768px) {
  .content { position: relative; }

  /* tweak brand spacing */
  .brand { padding: 8px 12px; }

  /* overlay header grid under the brand, above the canvas */
  .header {
    position: absolute !important;
    left: 8px; right: 8px;
    top: 56px;                 /* offset under the logo row; adjust if needed */
    margin: 0 !important;
    z-index: 1400;             /* above canvas & other UI */
    background: transparent;
    pointer-events: auto;      /* header still clickable */
  }

  /* ensure canvas isn't pushed by header */
  .canvas { padding-top: 0 !important; margin-top: 0 !important; }
}

/* Mobile: header = single-row horizontal scroller (swipe) */
@media (max-width: 768px) {
  .content { position: relative; }

  /* keep logo row; place scroller under it, floating over canvas */
  .brand { padding: 8px 12px; }

  .header {
    position: absolute !important;
    left: 8px; right: 8px;
    top: 56px;                     /* adjust if your logo row is taller/shorter */
    z-index: 1300;
    background: transparent;

    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    padding: 0 4px;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;  /* iOS momentum */
    scrollbar-width: none;              /* Firefox hide bar */
  }
  .header::-webkit-scrollbar { display: none; } /* Chrome/Safari hide bar */

  /* flatten groups so buttons sit in a single row */
  .header-group { display: contents !important; }

  /* compact, finger-friendly buttons */
  .header .header-btn {
    flex: 0 0 48px;                /* fixed width for smooth scrolling */
    height: 48px !important;
    min-width: 48px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.06);
    scroll-snap-align: start;
  }

  /* optional snapping feel while scrolling */
  .header { scroll-snap-type: x proximity; }

  /* keep icons ~20% smaller, touch area unchanged */
  .header .header-btn { background-size: 48% !important; }
  #btn-explore, #btn-tutorial { background-size: 56% !important; }
}


@media (max-width: 768px) {
  body.modal-open .header {
    display: none !important;
  }
}

@media (max-width: 768px) {
  body.modal-open .header {
    display: none !important;
  }
}




  #login-button-mobile {
    background-color:white;
      border-radius: 100px;
      color: black;
      width: 70px;
  }
}

/* Mobile: unify modal margins */
@media (max-width: 768px) {
  .modal-content,
  .modal-box {
    margin: 16px !important;
    border-radius: 12px;
    max-width: calc(100% - 32px); /* keep side margins */
    width: auto !important;
  }
}

@media (max-width: 768px) {
  body.logged-in #login-container-mobile,
  body.logged-in #signup-container-mobile {
    display: none !important;
  }

}

@media (max-width: 768px) {
  /* Default (logged-out) */
  /* #mobile-auth-user #user-menu { display: none; }*/

  /* After login (toggled by mobile.js via body.logged-in) */
  body.logged-in #login-container-mobile,
  body.logged-in #signup-container-mobile { display: none !important; }
  
}

/* mobile.css (add/update inside @media (max-width:768px)) */
             /* default */



@media (max-width: 768px) {
  #mobile-auth-user { position: relative; z-index: 1600; }
  #dropdown-menu-mobile {
    position: absolute; right: 0; top: calc(100% + 8px);
    display: none; z-index: 1700;
  }
  /* show when wrapper has the toggle class */
  #mobile-auth-user.dropdown-open #dropdown-menu-mobile { display: block !important; }
}

@media (max-width: 768px) {
  #mobile-auth-user { position: relative; z-index: 1600; }
  #dropdown-menu-mobile {
    position: absolute; right: 0; top: calc(100% + 8px);
    display: none; z-index: 1700;
  }
  #mobile-auth-user.dropdown-open #dropdown-menu-mobile {
    display: block !important;
  }
}

@media (max-width: 768px){
  #mobile-auth-user{ position:relative; z-index:1600; }
  #mobile-auth-user .dropdown{
    position:absolute; right:0; top:calc(100% + 8px);
    display:none; z-index:1700;
  }
}

@media (max-width: 768px){
  #mobile-auth-user.is-open .dropdown,
  #mobile-auth-user.is-open #dropdown-menu-mobile { display: block !important; }
}

@media (max-width: 768px) {
  #mobile-auth-user.dropdown-open #dropdown-menu-mobile {
    display: block !important;
  }
}


@media (max-width: 768px) {
  /* hide nothing, just reposition the existing #auth-user */
  .brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
  }

  .brand-logo {
    max-width: 200px;
    height: auto;
    flex: 0 1 auto;
  }

  #auth-user {
    display: flex !important;     /* force visible on mobile */
    align-items: center;
    gap: 8px;
    margin-left: auto;  
  position: absolute;
  top:-0px;
  right:10px;          /* push to the right of logo */
  z-index:1000;

  }

  .header {
      /* overflow: visible;*/
  }
}

@media (max-width: 768px){
  #auth-user{
    position: fixed;   /* escape the overflow clip */
    top: 20px;
    right: 20px;
    z-index: 1600;     /* above header strip */
  }
  .brand{ padding-right: 72px; } /* keep it from overlapping the logo */
}




/* iOS: prevent auto-zoom on input focus inside the items modal */
@media (hover: none) and (pointer: coarse) {
  #itemsModal input[type="search"],
  #itemsModal input[type="text"],
  #itemsModal input[type="email"],
  #itemsModal input[type="number"],
  #itemsModal select,
  #itemsModal textarea {
    font-size: 16px !important;   /* key */
    line-height: 1.2;
    min-height: 44px;              /* nice for touch */
  }
}

/* Stop iOS text inflation (prevents random giant text) */
html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Only the search input needs 16px to prevent auto-zoom */
#itemsModal input[type="search"],
#itemsModal .search-input {
  font-size: 16px !important;   /* key to stop iOS zoom-on-focus */
  line-height: 1.2;
  min-height: 36px;              /* smaller than 44px so it doesn’t feel huge */
  /* keep your existing padding/border-radius if any */
}

/* Don’t upscale other inputs inside the modal */
#itemsModal input:not([type="search"]),
#itemsModal select,
#itemsModal textarea {
  font-size: inherit;            /* revert any previous 16px forcing */
  min-height: auto;
}

/* MOBILE: don't overlap the canvas — make header part of the flow */
@media (max-width: 768px){
  .content { position: static !important; }

  .header{
    position: static !important;     /* was absolute */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: auto !important;
    margin: 8px 8px 0 !important;

    /* keep your compact, scrollable row of buttons */
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    padding: 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Canvas now sits BELOW the header, and we still reserve space for the
     fixed Cable row + bottom items bar so nothing covers the canvas bottom */
  .canvas{
    padding-top: 8px !important;
    padding-bottom: calc(var(--itemsbar-h, 88px) + 56px + 12px) !important;
  }
}


/* MOBILE: reserve space so the canvas never sits under Cable Mode / Bottom menu */
@media (max-width: 768px){
  /* kill any older per-canvas padding fix */
  .canvas{ padding-bottom: 0 !important; }

  /* reserve space at the page level:
     - bottom items bar (var(--itemsbar-h) defaults to 88px)
     - Cable Mode bar (56px)
     - iPhone safe area + a small buffer */
  .content{
    padding-bottom: calc(var(--itemsbar-h, 88px) + 56px + env(safe-area-inset-bottom) + 12px) !important;
  }
}

/* MOBILE: keep canvas/content above Cable Mode + bottom menu */
@media (max-width: 768px){
  :root{
    --itemsbar-h: 88px;   /* bottom menu height */
    --cablebar-h: 56px;   /* Cable Mode bar height */
  }

  /* make sure both bars are fixed and stacked */
  .utility-footer{
    position: fixed !important;
    left: 0; right: 0;
    bottom: var(--itemsbar-h);
    height: var(--cablebar-h);
    z-index: 1100;
  }
  .mobile-bottom-menu{
    position: fixed !important;
    left: 0; right: 0;
    bottom: 0;
    height: var(--itemsbar-h);
    z-index: 1101;
  }

  /* reserve their combined height so canvas never sits underneath */
  .container > .content{
    padding-bottom: calc(var(--itemsbar-h) + var(--cablebar-h) + env(safe-area-inset-bottom)) !important;
  }

  /* iOS: prevent zoom-on-focus when user taps the search */
  #mobileModal #mobileSearch{
    font-size: 16px !important;
  }
}


/* ==== FINAL MOBILE OVERRIDES (place at end of mobile.css) ==== */
@media (max-width: 768px){



  /* Ensure the canvas sits below any UI chrome */
  .canvas{
    position: relative !important;
    z-index: 0 !important;

    /* Full-bleed width on mobile */
    width: 100vw !important;
    margin: 0 !important;

    /* reserve space so it never sits under the two fixed bars */
    padding-bottom: calc(var(--itemsbar-h, 88px) + var(--cablebar-h, 56px) + env(safe-area-inset-bottom)) !important;
  }

  /* If your page wrapper had side padding, neutralize it so the canvas can truly span */
  .content{
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* --- FIX: stop canvas overlapping footer bars --- */
@media (max-width: 768px) {
  .canvas {
    position: relative !important;
    z-index: 0 !important;      /* canvas stays behind */
    width: 100vw !important;
    margin: 0 !important;
    /* background-color: hotpink;*/
  }

  .utility-footer {
    position: fixed !important;
    bottom: 88px;               /* sit above bottom menu */
    left: 0; right: 0;
    z-index: 1001 !important;   /* above canvas */
  }

  .mobile-bottom-menu {
    position: fixed !important;
    bottom: 0;
    left: 0; right: 0;
    z-index: 1002 !important;   /* above utility-footer + canvas */
  }
}


/* --- MOBILE SAFARI: canvas behind bars + truly full-width --- */
@media (max-width: 768px) {
  html, body { margin: 0 !important; }

  /* Never clip fixed bars; kill any accidental transforms */
  .wrapper, .container, .content {
    overflow: visible !important;
    transform: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  /* Canvas wrapper full-bleed and behind everything */
  .canvas {
    position: relative !important;
    z-index: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;         /* remove any side gaps */
    padding: 0 !important;
    touch-action: none;
  }

  /* The <canvas> itself must stretch edge-to-edge */
  #myCanvas {
    display: block;
    width: 100vw !important;
    height: auto;                  /* keep aspect ratio */
  }

  /* Footers fixed and stacked above canvas (Safari-safe) */
  .utility-footer {
    position: fixed !important;
    left: 0; right: 0;
    bottom: 88px;                  /* height of bottom menu */
    z-index: 2147483646 !important;
  }
  .mobile-bottom-menu {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 2147483647 !important;
  }
}


/* === Mobile: make the canvas height stop before the two bottom bars === */
@media (max-width: 768px) {
  :root{
    --itemsbar-h: 88px;   /* bottom items menu height */
    --cablebar-h: 56px;   /* Cable Mode row height */
  }

  /* The wrapper that contains <canvas> */
  .canvas{
    /* exact viewport height minus BOTH bottom bars and the iPhone safe area */
    height: calc(100dvh - var(--itemsbar-h) - var(--cablebar-h) - env(safe-area-inset-bottom)) !important;
    width: 100vw !important;
    margin: 0 !important;
    overflow: hidden; /* prevent it from spilling underneath the bars */
      -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  }

  /* Make the <canvas> fit the wrapper without adding extra height */
  #myCanvas{
    display: block;
    max-width: 100%;
    height: 100% !important;   /* match the wrapper’s computed height */
  }
}


/* Let us handle pinch ourselves on the canvas */
/* was: #canvas { touch-action: none; } */
#myCanvas { touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}  /* allow our JS to own gestures only on canvas */



@media (max-width: 768px) {
  #signup-container {
    display: none !important;
  }
}


/* Increase size of fixed anchors and their labels on phones */
@media (max-width: 768px) {
  .anchorBtn {
    width: 40px !important;    /* bump circle size */
    height: 40px !important;
    font-size: 14px !important; /* bump text inside circle */
    line-height: 40px !important;
  }

  .anchorBtn span,
  .anchorBtn-label {
    font-size: 14px !important; /* bump the label text */
  }
}

@media (max-width: 768px) {
  /* When the mobile drawer is open, hide avatar + dropdown */
  body.modal-open #auth-portal,
  body.modal-open #dropdown-menu,
  body.modal-open .dropdown { 
    display: none !important;
  }

  #btn-explore {
  background-size: 48% 48% !important;
  }
  #btn-tutorial {
  background-size: 47% 47% !important;
  }


}


/* === FINAL STACKING FIX (phones only) ========================= */
@media (max-width:768px){

  /* 0) kill accidental stacking contexts above the modal */
  .wrapper, .container, .content, .brand, .header {
    transform: none !important;
    z-index: auto !important;
    overflow: visible !important;
  }

  /* 1) baseline: bars sit below everything */
  .mobile-bottom-menu {            /* bottom tab bar */
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 1200 !important;
  }
  .utility-footer {                /* “Cable Mode” row */
    position: fixed !important;
    left: -20px; right: 0;
    bottom: 88px;                  /* height of bottom menu */
    z-index: 1300 !important;
  }

  /* 2) user menu sits above bars, but below modals */
  #auth-user,
  #auth-portal,
  #dropdown-menu,
  #dropdown-menu-mobile,
  #mobile-auth-user,
  #mobile-auth-user .dropdown {
    position: fixed !important;
    z-index: 5000 !important;      /* above bars (1200/1300), below modals (9000) */
  }

  /* 3) ALL desktop-style modals and their backdrops sit on top */
  .overlay,
  .modal,
  .modal-box,
  .modal-content,
  .video-modal,
  #itemsModal {                    
    position: fixed !important;
    z-index: 9000 !important;      /* above user menu & bars */
  }
  /* mobile overlay shouldn't cover bottom menu */
.overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 90px !important;              /* leave space for bottom bar */
  height: calc(100vh - 90px) !important;
  z-index: 8999 !important;
}


  /* 4) keep white modals nicely inset on phones (optional) */
  .modal-content,
  .modal-box {
    inset: 16px !important;
    max-width: calc(100% - 32px) !important;
    width: auto !important;
    border-radius: 16px !important;
  }

  .header-btn {width:100px;}
}

/* compact sizes on phones */
@media (max-width:768px){

  /* Header icons: small & consistent */
  .header .header-btn{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:20px 20px !important;  /* ↓ icon size */
    border-radius:10px;
  }
  .header .header-btn > svg,
  .header .header-btn > img,
  .header .header-btn > i{
    width:20px !important;
    height:20px !important;
  }

  /* Bottom menu buttons: slightly smaller */
  .menu-btn{
    width:56px !important;
    height:56px !important;
    gap:6px !important;
    padding-bottom:6px !important;
    font-size:10px !important;
  }
  .menu-btn::before{
    width:48px !important;
    height:48px !important;
    margin-top:4px !important;
    margin-bottom:-2px !important;
    background-size:contain !important;
  }
}

@media (max-width: 768px) {
 /* Remove zoom buttons as mobile uses pinch gestures */ 
 #zoomOutBtn {display:none !important;}
 #zoomInBtn {display:none !important;}
#btn-tutorial {display:none !important;}
  .avatar {position:absolute; top:10px; right:10px; z-index: 9000 !important;}
  #login-container {display:none;}
  #login-button{display:none;}
  #signup-container{display:none;}
}


@media (max-width: 768px) {
  #login-container-mobile {
    width: auto !important;       /* shrink to fit */
    margin-left: auto !important; /* push to right */
    background: transparent !important; /* no full bar color */
  }

  #login-button-mobile {
    background-color: white;
    border-radius: 100px;
    color: black;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 700;
    width:100px;
  }

}



/* FORCE the mobile Connect button to the far right of the brand row */
/* ===========================
   MOBILE AUTH (Connect button)
   =========================== */
@media (max-width: 768px) {
  .brand {
    position: relative !important;
  }

  #mobile-auth-user {
    position: absolute !important;
    right: 12px;                 /* push to far right */
    top: 50%;
    transform: translateY(-50%); /* vertical center */
    margin: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    z-index: 800 !important;     /* keep below modals (9000) */
  }

  #login-container-mobile {
    width: auto !important;
    background: transparent !important;  /* remove full bar */
  }

  #login-button-mobile {
    padding: 6px 16px;
    border-radius: 999px;
  }

  /* Ensure Explore / My Pedalboards modals scale properly */
  #exploreModal .modal-box,
  #my-pedalboards-modal .modal-box {
    max-width: 700px;
    width: 100%;
    max-height: 100vh;
  }
}

/* ===========================
   MOBILE CARD GRID (≤768px)
   =========================== */
@media (max-width: 768px) {
  .pedalboard-card {
    display: grid !important;
    grid-template-columns: 56px 1fr; /* smaller thumb column */
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: start;
    text-align: left !important;
  }

  .pedalboard-card .board-thumbnail-wrapper {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 56px;
    height: 56px;
    min-width: 56px;
    align-self: start;
    justify-self: start;
  }
  .pedalboard-card .board-thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .pedalboard-card .pb-info {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: start;
  }

  .pedalboard-card .pb-actions {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-content: flex-start;
    gap: 8px;
  }

  /* Delete button sizing on mobile */
  .pedalboard-card .delete-btn {
    width: 40px !important;   /* bigger tap target */
    height: 40px !important;
    border: 1.5px solid #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
        background: #fff url("./images/trashcan.svg") center center no-repeat !important;
    background-size: 22px 22px !important;
  }

  .pedalboard-card .delete-btn svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
  }

    .utility-footer {
    /* background-color: salmon; */
  }
}

/* ===========================
   DESKTOP/TABLET (≥769px)
   =========================== */
@media (min-width: 769px) {
  .pedalboard-card {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .mobile-bottom-menu .menu-btn.selected,
  .mobile-bottom-menu .menu-btn[aria-selected="true"] {
    background-color: white !important;
    color: black !important;
    outline: none !important;   /* remove the blue stroke */
  }

  .mobile-bottom-menu .menu-btn.selected::before,
  .mobile-bottom-menu .menu-btn[aria-selected="true"]::before {
    filter: brightness(0); /* same as desktop: darken the icon */
  }
}


/* Prevent cut-off of bottom buttons in modals on phones */
/* Prevent last button in .form from being cut off on mobile */
@media (max-width: 768px) {
  .form > :last-child {
    margin-bottom: calc(var(--itemsbar-h, 88px) + env(safe-area-inset-bottom) + 16px) !important;
    margin-top: -10px !important;
  }


  .custom-cta-container {
    margin-top:-10px;
  }

   #submit-custom-item {height:34px;}
}




@media (max-width: 768px) {
  #mobileSearchClear {
    background: url("./images/icon_clear_search.svg") no-repeat center center;
    background-size: 28px 28px;
    background-color: transparent;
    border: none;
    width: 32px;
    height: 32px;
    filter: brightness(0) invert(1);  /* turn black SVG white */
    display: none; /* hidden by default */
  }
}


/* --- MOBILE: make header buttons grid respect screen padding --- */
@media (max-width: 768px) {
  .header {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    gap: 10px;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px;             /* ⬅ same side padding as logo row */
    box-sizing: border-box !important;
    margin: 8px 0 !important;
    /* background-color: aquamarine; */
  }

  .header-group {
    display: contents !important;
  }

  .header .header-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    flex: initial !important;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.06);
    background-size: 48% !important;
  }



}



/* === MOBILE: move anchor tooltips to top center === */
/* === MOBILE: move anchor tooltips to top center & enlarge === */
@media (max-width: 768px) {
  .anchor-tooltip {
    position: fixed !important;
    top: 140px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 99999 !important;

    /* 🔹 size and style */
    font-size: 14px !important;     /* bigger text */
    line-height: 1.2 !important;
    padding: 10px 18px !important;  /* larger touch-friendly padding */
    border-radius: 12px !important;

    background: rgba(0, 0, 0, 0.9) !important;
    color: #fff !important;
    font-weight: 600 !important;
    text-align: center !important;

    /* optional: max width to prevent overflow on small screens */
    max-width: 90vw !important;
  }
}


/* Fix: make the mobile search modal sit above the cable menu */
@media (max-width:768px){
  .mobile-modal { z-index: 10050 !important; }
}


/* === Items modal specific stacking fix === */
@media (max-width: 768px) {
  /* make the bottom menu appear above the items modal only */
  .bottom-menu.mobile-bottom-menu.items-modal-active {
    position: fixed;
    z-index: 12000 !important; /* higher than modal/backdrop */
  }

  /* push only the items modal below the menu */
  .mobile-modal.is-items-modal {
    z-index: 11000 !important; /* stays above backdrop, below menu */
  }
}