/* ─── PHONE-ONLY LAYER (Levi 2026-07-10) ─────────────────────────────────────
   Mobile optimization additions, scoped so they CANNOT touch PC: every rule in
   this file lives inside the single media query below, which requires a
   touch-primary device with no hover AND the builder's own ≤860px phone
   breakpoint. A desktop/laptop browser (mouse or trackpad → hover:hover,
   pointer:fine) can never match it, at any window size.

   ⛔ RULE: never add a selector OUTSIDE this media query. New phone-only
   markup is injected by src/phone-notice.js, gated in JS on the same query,
   so desktop DOM stays byte-identical too.

   Loaded AFTER styles.css (link order in index.html), so equal-specificity
   rules here win on phones.

   What it fixes (2026-07-10 phone audit):
   1. Header overflow — Special Request + Report a Bug + Reset pushed RESET
      off the right screen edge at 390px. Buttons compact; header can wrap.
   2. "Best on a PC" statement banner (src/phone-notice.js). */

@media (hover: none) and (pointer: coarse) and (max-width: 860px) {

  /* ── 1. HEADER ── */

  #sling-builder .cc-app-header {
    height: auto;
    min-height: var(--header-height);
    flex-wrap: wrap;
    row-gap: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  #sling-builder .cc-brand-logo { height: 34px; }
  #sling-builder .cc-header-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  #sling-builder .cc-special-btn { min-height: 36px; padding: 5px 10px; gap: 6px; }
  #sling-builder .cc-special-btn-icon { font-size: 14px; }
  #sling-builder .cc-special-btn-title { font-size: 10px; letter-spacing: 0.05em; }
  #sling-builder .cc-special-btn-sub { display: none; }
  #sling-builder .cc-reset-btn { min-height: 36px; padding: 7px 9px; font-size: 10px; letter-spacing: 0.1em; }

  /* ── 2. "BEST ON A PC" STATEMENT BANNER (src/phone-notice.js) ── */

  #sling-builder .cc-phone-notice {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 44px 12px 14px;
    background: var(--mms-orange);
    border-bottom: 2px solid var(--mms-cyan);
    color: #fff;
    z-index: 30;
  }
  #sling-builder .cc-phone-notice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  #sling-builder .cc-phone-notice-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.05;
  }
  #sling-builder .cc-phone-notice-sub {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    opacity: 0.95;
  }
  #sling-builder .cc-phone-notice-close {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }
}