/* ============================================================
   sc-playlist-editor  Phone view  —  max-width: 480px
   ============================================================ */

/* ── Desktop-hidden elements ─────────────────────────────────── */

#headerMenuBtn            { display: none; }
.phone-editor-footer      { display: none; }
.track-more-btn           { display: none; }

/* ── Embedded in dashboard iframe — hide redundant header/back ── */

body.embedded .sc-header        { display: none !important; }
body.embedded .dashboard-back-wrap { display: none; }
body.embedded > main            { padding-top: 0; }

/* ── Phone editor footer — shared style with dashboard footer ─── */
/*
   The editor footer now uses .phone-footer (same class as dashboard)
   for a consistent native tab-bar look. The publish button replaces
   the "+" create button slot in the center.
*/

.phone-editor-footer {
  display: none; /* shown at ≤480px only */
}

/* Publish button — highlighted as primary action */
.phone-editor-footer__publish-btn {
  color: #fff !important;
  opacity: 1 !important;
}

.phone-editor-footer__publish-btn:active {
  transform: scale(0.88);
}

/* ============================================================
   @media (max-width: 480px)
   ============================================================ */

@media (max-width: 480px) {

  /* ── Shared footer — visible on phone ────────────────────── */

  .phone-editor-footer {
    display: flex;
    /* Inherits .phone-footer positioning/colours from dashboard-phone.css
       (loaded by the build script into every native-app page). */
  }

  /* ── Header — fixed bar, logo left, hamburger right ───────── */

  .sc-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 210;
    padding: env(safe-area-inset-top, 0px) 12px 0;
    height: calc(56px + env(safe-area-inset-top, 0px));
    background: var(--bg);
    border-bottom: 0px solid var(--border2);
    display: flex;
    align-items: flex-end;
  }

  .sc-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    height: 56px;
  }

  /* Dropdown panel — slides in from below the header bar */
  .sc-header__items-panel {
    display: flex;
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 40px;
    gap: 4px;
    overflow-y: auto;
    background: var(--bg);
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    width: 100%;
    /* closed state */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0ms linear 220ms;
  }

  body.phone-header-open .sc-header__items-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0ms linear 0ms;
  }

  /* Hamburger button */
  #headerMenuBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: inherit;
  }

  #headerMenuBtn .hamburger-line {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 200ms ease, opacity 200ms ease;
  }

  body.phone-header-open #headerMenuBtn .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.phone-header-open #headerMenuBtn .hamburger-line:nth-child(2) {
    opacity: 0;
  }

  body.phone-header-open #headerMenuBtn .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Full-width rows in dropdown */
  .sc-header__items-panel > .header-link,
  .sc-header__items-panel > button,
  .sc-header__items-panel .admin-nav-links a {
    width: 100%;
    justify-content: flex-start;
    font-size: var(--theme-text-size-md, 12px);
    padding: 13px 16px;
    border-radius: 10px;
    min-height: 48px;
  }

  .sc-header__items-panel > .header-notification-bell,
  .sc-header__items-panel > .header-account-avatar {
    min-width: 48px;
    min-height: 48px;
  }

  /* ── Main layout — push below fixed header (incl. safe area) ── */

  body > main {
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
  }

  /* ── Dashboard back link ────────────────────────────────── */

  .dashboard-back-wrap {
    padding: 10px 12px 0;
  }

  /* ── Admin panel — hidden on phone ─────────────────────── */

  .admin-panel {
    display: none;
  }

  /* ── Wrap grid — single column ──────────────────────────── */

  .wrap.grid {
    display: block;
    padding: 0;
    margin: 0;
  }

  /* ── Playlists panel — strip card chrome ────────────────── */

  .playlists-panel.card {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    gap: 0;
    box-shadow: none;
  }

  .playlists-panel.card > h2 {
    display: none;
  }

  .playlists-panel.card > .body {
    padding: 0;
  }

  /* ── Plist card — strip outer chrome ───────────────────── */

  .plist {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-bottom: 12px;
  }

  /* ── Cover panel — compact horizontal row ───────────────── */

  .plist-cover-panel {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    min-height: auto;
    padding: 10px;
  }

  .plist-cover-inner {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
  }

  .plist-cover-actions {
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 0;
    gap: 8px;
  }

  /* ── Plist meta — single column ─────────────────────────── */

  .plist-meta {
    grid-template-columns: 1fr;
  }

  /* ── Plist head — wrap title + actions ──────────────────── */

  .plist-head {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Settings popup — bottom sheet layout ───────────────── */

  .plist-settings-popup {
    align-items: flex-end;
    justify-content: stretch;
    padding: 12px 0 0;
  }

  .plist-settings-popup__box {
    --popup-card-width: 100vw;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 68px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
    padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -14px 38px rgba(0, 0, 0, 0.18);
  }

  .plist-settings-popup__header {
    position: sticky;
    top: -18px;
    z-index: 1;
    margin: -18px -16px 14px;
    padding: 18px 16px 12px;
    background: var(--panel-bg);
    border-bottom: 0px solid var(--border2);
  }

  .plist-settings-popup__close {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .plist-settings-popup .plist-comment-body {
    gap: 12px;
  }

  .plist-settings-popup .plist-settings-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 0 12px;
  }

  .plist-settings-popup .plist-meta-field,
  .plist-settings-popup .plist-meta-toggle {
    width: 100%;
    align-items: stretch;
    align-self: stretch;
  }

  .plist-settings-popup .plist-meta-field label,
  .plist-settings-popup .plist-meta-toggle label,
  .plist-settings-popup .plist-doc-label {
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
  }

  .plist-settings-popup .plist-meta-field input[type="text"] {
    min-height: 46px;
    font-size: 16px;
  }

  .plist-settings-popup .plist-toggle {
    width: 100%;
    min-height: 48px;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    font-size: 12px;
  }

  .plist-settings-popup .plist-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  .plist-settings-popup .plist-settings-module .plist-comment-toggle {
    min-height: 48px;
    padding: 16px 0;
  }

  .plist-settings-popup .plist-settings-module .plist-comment-body {
    gap: 12px;
    padding-bottom: 16px;
  }

  .plist-settings-popup .plist-doc-label {
    padding-top: 0;
  }

  /* ── Track actions — phone collapsed ────────────────────── */

  .track-actions [data-track-action="edit"],
  .track-actions [data-track-action="comment"],
  .track-actions [data-track-action="remove"] {
    display: none;
  }

  .track-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid var(--border2);
    background: transparent;
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Expanded: show all actions */
  .track-actions.is-more-open [data-track-action="edit"],
  .track-actions.is-more-open [data-track-action="comment"],
  .track-actions.is-more-open [data-track-action="remove"] {
    display: inline-flex;
  }

  .track-actions.is-more-open .track-more-btn {
    opacity: 0.4;
  }

  /* Hide text labels on track actions — icons only */
  .track-actions .btn-label {
    display: none;
  }

  /* ── Footer player — phone sizing ───────────────────────── */

  .footer-player {
    bottom: 88px; /* sit above phone footer */
  }

  /* ── Main content — push above footer ───────────────────── */

  main {
    padding-bottom: 104px;
  }

  /* ── Phone footer — visible on phone ────────────────────── */

  .phone-editor-footer {
    display: flex;
  }

}