/* Phone only (Or, 1.11.2026: "בטלפון כדאי לעבוד עם המבורגר כמו אפידמיק", "לכל שיר יש 3
   נקודות וגם שם נפתח תפריט", "קו תחתון בלי צבע כתום, אלא לבן", "כל זה בטלפון בלבד").
   Desktop is untouched: every rule sits inside a phone media query.
   Behaviour lives in /assets/phone-ui.js; scripts/site_phone_ui.py puts both on every page. */

.pn-burger,.pn-more,.pn-sheet,.pn-menu{display:none}

@media (max-width:760px){
  /* ── top bar: logo left, account + hamburger right ── */
  body .brand.topnav,body .brand.topnav.stuck{display:flex!important;flex-wrap:nowrap!important;
    align-items:center;justify-content:flex-start;gap:8px;row-gap:0;
    padding:10px 12px 10px 16px!important;background:var(--bg,#111)}
  body .brand.topnav .tn-logo{margin-right:auto;justify-self:auto}
  body .brand.topnav .tn-links{display:flex;gap:0!important;justify-self:auto;margin:0}
  body .brand.topnav .tn-links>:not(.tn-login){display:none!important}
  body .brand.topnav .tn-links>.tn-login:empty{display:none}
  body .brand.topnav .pn-burger{display:grid;place-items:center;width:44px;height:44px;flex:none;
    margin:0;padding:0;border:0;background:none;color:#fff;cursor:pointer;border-radius:4px}
  .pn-burger svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .pn-burger .x{display:none}
  .pn-burger[aria-expanded="true"] .x{display:block}
  .pn-burger[aria-expanded="true"] .b{display:none}

  /* ── account button: a plain white icon beside the hamburger, no frame ── */
  body .brand.topnav .acctin,body .brand.topnav .acctin:hover{display:grid;place-items:center;
    width:44px;height:44px;padding:0!important;border:0!important;background:none!important;
    box-shadow:none!important;color:#fff}
  body .brand.topnav .acctin .acctinico svg{width:22px;height:22px;fill:none!important;
    stroke:#fff!important;stroke-width:1.6}

  /* ── the sheet the hamburger opens ── */
  .pn-sheet{display:block;position:fixed;left:0;right:0;bottom:0;top:var(--pn-top,64px);z-index:59;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    background:var(--bg,#111);padding:8px 16px calc(32px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.08)}
  .pn-sheet[hidden]{display:none}
  body.pn-open{overflow:hidden}
  body.pn-open .human-support-tab,body:has(#plmenu.open) .human-support-tab,
  body:has(.pn-menu:not([hidden])) .human-support-tab{display:none!important}
  .pn-sheet a,.pn-sheet .pn-grp>button{display:flex;align-items:center;justify-content:space-between;
    width:100%;min-height:56px;padding:0 4px;border:0;background:none;
    color:#fff;font:500 18px/1.2 var(--sans,Inter,system-ui,sans-serif);letter-spacing:-.01em;
    text-align:left;text-decoration:none;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.08)}
  .pn-sheet a[aria-current="page"]{color:#fff;font-weight:600}
  .pn-sheet .pn-grp>button svg{width:12px;height:8px;flex:none;opacity:.7;transition:transform .25s}
  .pn-sheet .pn-grp>button[aria-expanded="true"] svg{transform:rotate(180deg)}
  .pn-sheet .pn-sub{padding:4px 0 10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
  .pn-sheet .pn-sub[hidden]{display:none}
  .pn-sheet .pn-sub a{display:block;min-height:0;padding:12px 4px;border:0;font-size:16px}
  .pn-sheet .pn-sub a i{display:block;margin-top:3px;font-style:normal;font-size:13px;font-weight:400;
    color:rgba(255,255,255,.55);line-height:1.35}

  /* ── Assistant / Search underline: white, not coral ── */
  .mode.on,.ptab.on{border-bottom-color:#fff!important}
  /* a tap leaves :hover stuck on a phone, which painted the tab as a white box */
  .mode:hover,.ptab:hover{background:none!important}
}

@media (max-width:620px){
  /* ── each track row: the heart and ⋯ only; ⋯ opens the rest ── */
  body .rows .row .tools .ico{display:none!important}
  body .rows .row .tools .ico[data-liked],body .rows .row .tools .pn-more{display:grid!important}
  body .rows .row .tools{display:flex;align-items:center;gap:0}
  .pn-more{place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;
    background:none;color:rgba(255,255,255,.9);cursor:pointer}
  .pn-more[aria-expanded="true"]{background:rgba(255,255,255,.1)}
  .pn-more svg{width:20px;height:20px;fill:currentColor}

  .pn-menu{display:block;position:fixed;z-index:120;min-width:220px;max-width:calc(100vw - 32px);
    padding:6px;border-radius:6px;background:#26262a;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 50px -16px rgba(0,0,0,.9)}
  .pn-menu[hidden]{display:none}
  .pn-menu button{display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:0 12px;
    border:0;border-radius:4px;background:none;color:#fff;cursor:pointer;
    font:400 16px/1.2 var(--sans,Inter,system-ui,sans-serif);text-align:left}
  .pn-menu button:active,.pn-menu button:focus-visible{background:rgba(255,255,255,.08);outline:none}
  .pn-menu button.pn-off{color:rgba(255,255,255,.5)}
  .pn-menu button .pi{display:grid;place-items:center;width:22px;height:22px;flex:none}
  .pn-menu button .pi svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}
  .pn-menu button .pi svg.fill{fill:currentColor;stroke:none}

  /* ── Add to playlist: a sheet from the bottom, not a box over the row ── */
  body #plmenu.plmenu{left:0!important;right:0!important;top:auto!important;
    bottom:calc(var(--playerh,0px));width:auto;min-width:0;max-height:60vh;
    padding:44px 8px calc(12px + env(safe-area-inset-bottom));border-radius:8px 8px 0 0;
    background:#26262a;box-shadow:0 0 0 100vmax rgba(0,0,0,.6)}
  body #plmenu.plmenu::before{content:"Add to playlist";position:absolute;left:20px;top:16px;
    font:600 15px/1 var(--sans,Inter,system-ui,sans-serif);color:#fff}
  body #plmenu.plmenu button{min-height:52px;padding:0 12px;font-size:16px;color:#fff;border-radius:4px}
}