/* assets/bd-marketing-mobile.css — fix pack Session 11 (2026-09-29)
 *
 * Marketing on a phone.
 *
 * Two problems, both about height. The left sidebar doesn't disappear below 880px —
 * it stacks on top, so 396px of navigation sits above the thing you came to do. And
 * the Brand Kit is one 4,243px scroll with 61 controls in it: a contractor fills in
 * half, loses their place, and never gets to a flyer.
 *
 * Below 720px the sidebar becomes a dropdown in the header, and the Brand Kit becomes
 * four short steps — Your info, Logo, Colors, How you sound — each one a screen or so
 * with its own Save. Nothing is removed; the same cards are grouped and shown one at
 * a time. Build Materials keeps its sticky preview but puts the words before the shape
 * tools, and the Download button is pinned where a thumb already is.
 *
 * Scoped to <=720px. Desktop is untouched.
 */

@media (max-width:720px){

  /* ── Sidebar out, dropdown in ────────────────────────────────────────── */
  /* HIDDEN 2026-09-29 (fixpack S11): 396px of stacked navigation above the content.
     The same links live in .bd-mksel below and in the shared bottom bar's More. */
  .bd-mk-mobile .sidebar{ display:none !important; }
  .bd-mk-mobile .hub{ display:block !important; }
  .bd-mksel-wrap{
    position:sticky; top:0; z-index:40;
    background:var(--navy-deep,#0D1B2E);
    padding:0.5rem 1rem calc(0.5rem + 1px);
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .bd-mksel{
    display:block; width:100%; min-height:48px;
    background:rgba(255,255,255,0.08); color:#fff;
    border:1px solid rgba(255,255,255,0.22); border-radius:8px;
    font-family:'DM Sans',system-ui,sans-serif; font-size:16px; font-weight:700;
    padding:0 12px;
  }
  .bd-mksel option{ color:#0D1B2E; }

  /* 450px of headline and blurb before the first question. The dropdown above
     already names the section, so on a phone the words go and the work starts.
     HIDDEN 2026-09-29 (fixpack S11): still there on any screen over 720px. */
  .bd-mk-mobile #view-brand .section-head .eyebrow,
  .bd-mk-mobile #view-brand .section-head .section-sub{ display:none; }
  .bd-mk-mobile #view-brand .section-head{ padding-top:1rem; padding-bottom:0.6rem; }
  .bd-mk-mobile #view-brand .section-h{ font-size:1.6rem; }

  /* ── Brand Kit: four steps instead of one long scroll ─────────────────── */
  .bd-mk-mobile .bd-bkstep{ display:none; }
  .bd-mk-mobile .bd-bkstep.on{ display:block; }
  .bd-mk-mobile .brand-kit-grid{ display:block; max-width:none; }
  .bd-mk-mobile .bk-card{ padding:1.1rem 1.05rem; }
  .bd-bkbar{
    display:flex; align-items:center; gap:0.5rem;
    padding:0.7rem 0 0.9rem;
  }
  .bd-bkbar .bd-bkdot{
    flex:1 1 0; height:5px; border-radius:3px;
    background:var(--border-light,#E4E8EE);
  }
  .bd-bkbar .bd-bkdot.done{ background:var(--gold,#C9922A); }
  .bd-bkhead{
    font-family:'DM Sans',sans-serif; font-size:0.66rem; font-weight:700;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--gold,#C9922A);
    margin-bottom:0.3rem;
  }
  .bd-bkfoot{ display:flex; gap:0.5rem; margin:0.9rem 0 1.4rem; }
  .bd-bkfoot button{
    flex:1 1 0; min-height:48px; border-radius:8px;
    font-family:'DM Sans',sans-serif; font-size:0.86rem; font-weight:700; cursor:pointer;
  }
  .bd-bkfoot .bd-bkback{ flex:0 0 33%; background:#fff; border:1px solid var(--border-light,#E4E8EE); color:var(--slate,#5B6B80); }
  .bd-bkfoot .bd-bknext{ background:var(--gold,#C9922A); border:1px solid var(--gold,#C9922A); color:#fff; }
  .bd-bkmsg{ font-family:'DM Sans',sans-serif; font-size:0.78rem; line-height:1.5; margin:-0.6rem 0 1.1rem; }
  .bd-bkmsg.ok{ color:#2E7D52; }
  .bd-bkmsg.err{ color:#9B2C2C; }
  .bd-mk-mobile .bd-hide-phone{ display:none !important; }
  .bd-mk-mobile .save-row{ display:flex; flex-direction:column; align-items:stretch; gap:0.6rem; margin:0.4rem 0 0; }
  .bd-mk-mobile .save-row .btn-outline{ min-height:48px; width:100%; }
  .bd-bkmsg button{
    display:block; margin-top:0.4rem; min-height:44px;
    background:none; border:none; padding:0;
    color:var(--gold,#C9922A); font-weight:700; font-size:0.8rem; cursor:pointer; text-decoration:underline;
  }
  /* The stacked live-preview panel is ~500px of scroll before the first field.
     HIDDEN 2026-09-29 (fixpack S11): the steps show their own result as you go. */
  .bd-mk-mobile .bk-split .bkp-wrap{ display:none !important; }
  .bd-mk-mobile .bk-split{ display:block; }

  /* Colour swatches a thumb can actually hit (they were 30px circles). */
  .bd-mk-mobile .bk-sw{ width:44px; height:44px; }
  .bd-mk-mobile .bk-sw-row{ gap:0.55rem; }
  .bd-mk-mobile .bk-exact-toggle,
  .bd-mk-mobile .palette-presets-toggle{ min-height:44px; }
  .bd-mk-mobile .tone-chip{ min-height:44px; padding:0.6rem 0.95rem; }
  .bd-mk-mobile .font-card{ min-height:88px; }
  .bd-mk-mobile .field-row{ display:block; }
  .bd-mk-mobile .field input, .bd-mk-mobile .field select, .bd-mk-mobile .field textarea{ min-height:44px; font-size:16px; }

  /* ── Build Materials ──────────────────────────────────────────────────── */
  .bd-mk-mobile .gen-controls{ display:flex; flex-direction:column; }
  .bd-camera-btn{ display:inline-block !important; margin-left:0.4rem; }
  .bd-mk-mobile .control-group .btn-outline{ min-height:44px; }
  /* Shape tools are an "if you want to" — they're not the road to a finished flyer. */
  .bd-advwrap{ margin-top:0.4rem; }
  .bd-advtoggle{
    width:100%; min-height:44px; text-align:left;
    background:none; border:none; padding:0.6rem 0;
    font-family:'DM Sans',sans-serif; font-size:0.78rem; font-weight:700;
    color:var(--slate,#5B6B80); cursor:pointer;
  }
  .bd-advwrap > .control-group{ display:none; }
  .bd-advwrap.open > .control-group{ display:block; }

  /* Download stays where the thumb is, just above the shared bottom bar. */
  .bd-mk-mobile #dlRow{
    position:fixed; left:0; right:0; z-index:35;
    bottom:calc(58px + env(safe-area-inset-bottom));
    background:#fff; border-top:1px solid var(--border-light,#E4E8EE);
    padding:0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom) * 0);
    flex-direction:row !important; align-items:center; gap:0.6rem;
    box-shadow:0 -6px 18px rgba(13,27,46,0.1);
  }
  .bd-mk-mobile #dlRow > label{ flex:0 0 42%; margin:0; }
  .bd-mk-mobile #dlRow > label select{ min-height:44px; font-size:16px; }
  .bd-mk-mobile #dlRow > button{ flex:1 1 auto; width:auto !important; min-height:48px; }
  /* Room for it, so the last control isn't trapped under the bar. */
  .bd-mk-mobile #view-build{ padding-bottom:86px; }
  .bd-mk-mobile #dlStatus{ position:relative; z-index:36; }
}