/* Castimony mobile-app layer. Desktop-first site stays untouched;
   everything here applies at phone widths only. */
.ab-tabs { display: none; }
.muser-btn, .muser-panel { display: none; }
.cwUbtn { display: none; }
/* Role-based header filtering (actor-bar sets body[data-role] at login).
   Logged-out users and admins have no role: they see every tab. */
body[data-role="production"] .mainnav a[href="/for-actors"],
body[data-role="production"] .mainnav a[href="/for-producers"],
body[data-role="production"] .mainnav a[href="/find-work"],
body[data-role="cast"] .mainnav a[href="/find-actors"],
body[data-role="cast"] .mainnav a[href="/for-actors"],
body[data-role="cast"] .mainnav a[href="/for-producers"] { display: none !important; }

@media (max-width: 640px) {
  html, body { overflow-x: clip; }
  body { padding-bottom: 84px; }
  img, video { max-width: 100%; height: auto; }
  input, select, textarea { font-size: 16px !important; }
  h1 { font-size: clamp(1.45rem, 6.4vw, 2rem) !important; line-height: 1.15; }
  h2 { font-size: clamp(1.1rem, 4.8vw, 1.4rem) !important; }

  /* Touch targets on common buttons (not icon-density rows) */
  .btn-primary, .btn-gold, .btn-line, .btn-ghost,
  .mini, .smini, .cw-mini { min-height: 44px; }
  .mini, .smini { font-size: .82rem; }

  /* Dropdown menus: anchor below the header, above everything */
  .mainnav { top: 100% !important; z-index: 200 !important; }
  .topbar { z-index: 150 !important; }
  /* Logged-out header order (Join, Login) comes from the markup */
  /* Golden user button replaces Join/Login links on phones */
  .top-actions .btn-primary.logged-out-only,
  .top-actions a.btn-ghost.logged-out-only { display: none !important; }
  /* Breathing room after the hero join buttons */
  .hero-btns { margin-bottom: 22px !important; }
  /* Top bars wrap instead of squeezing */
  .actor-bar { flex-wrap: wrap; row-gap: 6px; }
  .pf-acts { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .pf-topbar .in { position: relative; }
  /* Header logout + gear live in the hamburger menu on phones */
  .top-actions #navLogout,
  .top-actions .actor-bar > a.btn-ghost,
  #acctBtn,
  #logoutBtn { display: none !important; }
  .pf-home[href="/"] { display: none !important; }
  .banner100 { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .banner100 button { width: 100%; margin-left: 0 !important; }
  .stat3 .l { font-size: .7rem !important; line-height: 1.35; overflow-wrap: anywhere; }
  .pf-nav { display: none; }
  .pf-nav.open { display: flex; flex-direction: column; position: absolute; top: calc(100% + 6px); right: 0; background: #fffdf6; border: 1px solid #eadfc3; border-radius: 14px; padding: 8px; z-index: 70; min-width: 190px; box-shadow: 0 18px 44px rgba(0,0,0,.25); }
  .pf-nav.open a { padding: 12px 10px; border-bottom: 1px solid #f1ead6; color: #0f1a2e; text-decoration: none; font-weight: 600; }
  .pf-nav.open a:last-child { border-bottom: 0; }
  .dash-top .in { flex-wrap: wrap; row-gap: 6px; }

  /* Generic containers */
  .container, .pf-wrap, .acct-wrap, .dash-layout, .body { padding-left: 12px !important; padding-right: 12px !important; }
  .cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .filters { grid-template-columns: 1fr 1fr !important; }
  .row2, .srow2 { grid-template-columns: 1fr 1fr !important; }
  table { display: block; overflow-x: auto; }
  .sheet, .ssheet { max-width: 100% !important; width: calc(100vw - 24px) !important; }

  /* Dashboard side nav becomes a horizontal chip rail */
  .dash-layout { display: block !important; }
  .sidenav { position: sticky; top: 0; z-index: 40; background: inherit; padding: 8px 0; }
  #sideNav { display: flex !important; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  #sideNav button { white-space: nowrap; flex: 0 0 auto; }
  .side-lbl { display: none; }

  /* Hired/shortlist horizontal rows stack their buttons */
  .hired-row { grid-template-columns: 56px 1fr !important; }
  .hired-row img { width: 56px !important; height: 56px !important; }
  .hired-row .mini { grid-column: auto; }

  /* Chat messenger becomes a full-screen sheet */
  .cw-veil { padding: 0 !important; }
  .cw-box { width: 100% !important; max-width: 100% !important; height: 100dvh !important; max-height: none !important; border-radius: 0 !important; grid-template-columns: 1fr !important; grid-template-rows: auto minmax(0, 1fr) !important; }
  .cw-left { max-height: 200px !important; border-right: 0 !important; border-bottom: 1px solid #eadfc3; }
  .cw-toast { left: 12px !important; right: 12px !important; transform: none !important; max-width: none !important; }

  /* Toasts fit small screens */
  #abToast, #msgToast, #shortToast, #cwToast { left: 12px !important; right: 12px !important; transform: none !important; max-width: none !important; }

  /* Golden glowing user button (logged-out phones only) */
  .muser-btn { display: grid !important; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(135deg,#f0be2e,#b47b06); color: #171106; font-size: 1.25rem; box-shadow: 0 0 18px rgba(240,190,46,.9),0 4px 14px rgba(0,0,0,.35); flex: 0 0 auto; }
  .muser-wrap { position: relative; }
  .muser-panel { position: absolute; right: 0; top: calc(100% + 8px); background: #fffdf6; border: 1px solid #eadfc3; border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.3); z-index: 120; min-width: 240px; padding: 8px; }
  .muser-panel.open { display: block !important; }
  .muser-panel a { display: block; padding: 12px 10px; color: #0f1a2e; text-decoration: none; font-weight: 700; font-size: .88rem; border-bottom: 1px solid #f1ead6; }
  .muser-panel a:last-child { border-bottom: 0; }
  /* ---- Phase 2: auth forms ---- */
  .auth-wrap { padding: 20px 12px 48px !important; }
  .auth-card { padding: 22px 16px !important; border-radius: 16px !important; }
  .f-grid { grid-template-columns: 1fr !important; }
  div[id^="ts"], .cf-turnstile { max-width: 100%; overflow: hidden; }
  iframe[src*="challenges.cloudflare.com"] { max-width: 100% !important; }
  .modal-veil { padding: 0 !important; place-items: end center !important; }
  .modal { max-width: 100% !important; width: 100% !important; border-radius: 18px 18px 0 0 !important; max-height: 92dvh; overflow: auto; }
  .modal .row2 { grid-template-columns: 1fr !important; }
  .otp-boxes { gap: 6px !important; }
  .otp-boxes input { font-size: 1.2rem !important; }
  /* ---- Phase 2: setup wizards ---- */
  .setup-card { padding: 20px 16px !important; }
  .f2, .checks { grid-template-columns: 1fr !important; }
  .checks label { min-height: 48px; }
  .dp-prev { width: 120px !important; height: 120px !important; }
  .nav-row { position: sticky; bottom: 76px; z-index: 50; background: #fffdf6; border-top: 1px solid #eadfc3; margin: 12px -12px 0; padding: 10px 12px; }
  .nav-row .btn-primary, .nav-row .btn-quiet { min-height: 48px; }
  #finCard { max-width: calc(100vw - 24px) !important; }
  /* ---- Phase 2: account ---- */
  .ed .row { flex-direction: column; }
  dl.kv { grid-template-columns: 1fr !important; gap: 2px !important; }
  #sec-blocked .btn-line { min-height: 44px; }
  /* ---- Phase 3: production dashboard ---- */
  .hist-filters { grid-template-columns: 1fr 1fr !important; }
  .dpage { display: flex; flex-wrap: wrap; gap: 8px; }
  .dpage button { min-height: 44px; }
  .card .row { flex-wrap: wrap; }
  .card .row .mini { flex: 1 1 auto; }
  .jobform { padding: 14px !important; }
  .checkline label { min-height: 40px; }
  .sheet .row2 { grid-template-columns: 1fr !important; }
  .sheet .dp { width: 96px !important; height: 96px !important; }
  .app-row { flex-wrap: wrap; }
  .side-q { min-height: 48px; }
  .group-h { flex-wrap: wrap; row-gap: 6px; }
  /* ---- Phase 3: search page ---- */
  .s-hero { padding-top: 20px !important; }
  .s-layout { gap: 14px !important; }
  .fa-grid { gap: 10px !important; }
  .ssheet .srow2 { grid-template-columns: 1fr !important; }
  /* ---- Step 5: actor profile ---- */
  .cover-main { padding: 0 14px 16px !important; }
  .avatar { width: 100px !important; height: 100px !important; margin-top: 12px !important; }
  .cover-name h1 { font-size: 1.15rem !important; }
  .hi-banner { position: relative; }
  .cwUbtn { display: inline-block !important; position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg,#f0be2e,#b47b06); color: #171106; font-weight: 800; font-size: .74rem; border-radius: 999px; padding: 9px 14px; text-decoration: none; box-shadow: 0 0 16px rgba(240,190,46,.85); z-index: 3; white-space: nowrap; }
  .pf-wrap .card, .feed .card { padding: 16px !important; }
  .stats3 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .checklist { padding: 14px !important; }
  #sec-blocked > div { flex-wrap: wrap !important; }
  .s-arrow { width: 38px !important; height: 38px !important; }
  .thumb-row { gap: 6px !important; }
  .thumb { width: 56px !important; height: 56px !important; }
  /* ---- Step 5: content pages ---- */
  .sheet dl { grid-template-columns: 1fr !important; }
  .acct dl { grid-template-columns: 1fr !important; }
  .mode-tabs { grid-template-columns: 1fr 1fr; }
  .fa-hero-in, .fw-hero-in { padding-left: 16px !important; padding-right: 16px !important; }
  /* Tawk bubble off on phones (Chat With Us button instead; desktop keeps it) */
  #tawkchat-container, iframe[title*="chat widget"] { display: none !important; }
  /* Bottom app tab bar */
  .ab-tabs { display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: #fffdf6; border-top: 1px solid #eadfc3; padding: 6px 2px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0,0,0,.12); }
  .ab-tabs a, .ab-tabs button { flex: 1 1 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 1.05rem; color: #0f1a2e; text-decoration: none; cursor: pointer; padding: 4px 0; position: relative; min-height: 52px; justify-content: center; }
  .ab-tabs small { font-size: .62rem; font-weight: 700; color: #6f6a5e; }
  .ab-tabs b { position: absolute; top: 2px; right: calc(50% - 22px); background: #b47b06; color: #fff; border-radius: 999px; font-size: .62rem; font-weight: 800; padding: 1px 6px; }
}