/* ALTER v1.0.13 — mobile-first application shell */
.mobile-app-tabbar{display:none}

@media(max-width:860px){
  :root{
    --alter-mobile-header-height:calc(60px + env(safe-area-inset-top));
    --alter-mobile-tabbar-height:calc(62px + env(safe-area-inset-bottom));
  }

  body{
    padding:0!important;
  }

  /* Phone header = app chrome, not desktop search UI. */
  .topbar{
    height:var(--alter-mobile-header-height)!important;
    min-height:var(--alter-mobile-header-height)!important;
    padding:
      env(safe-area-inset-top)
      12px
      0!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) 44px!important;
    grid-template-rows:60px!important;
    grid-template-areas:"menu brand actions"!important;
    align-items:center!important;
    gap:8px!important;
  }

  .topbar .search-trigger{
    display:none!important;
  }

  .main{
    padding-top:var(--alter-mobile-header-height)!important;
    padding-bottom:var(--alter-mobile-tabbar-height)!important;
  }

  .content{
    padding:
      12px
      12px
      calc(24px + var(--alter-mobile-tabbar-height))!important;
  }

  /* Persistent bottom app navigation. */
  .mobile-app-tabbar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:125;
    height:var(--alter-mobile-tabbar-height);
    padding:5px 8px env(safe-area-inset-bottom);
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:3px;
    background:#070a0e;
    border-top:1px solid rgba(255,255,255,.09);
    box-shadow:0 -12px 28px rgba(0,0,0,.34);
  }

  .mobile-app-tabbar button{
    min-width:0;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#6f7986;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font:700 7px/1 var(--mono);
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  .mobile-app-tabbar button.active{
    color:var(--accent-2);
    background:rgba(216,181,109,.07);
  }

  .mobile-tab-icon{
    font:800 14px/1 var(--mono);
    letter-spacing:0;
  }

  .mobile-app-tabbar button:nth-child(3) .mobile-tab-icon{
    width:34px;
    height:34px;
    margin-top:-12px;
    border:1px solid rgba(216,181,109,.28);
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#10151c;
    color:var(--accent);
    box-shadow:0 7px 18px rgba(0,0,0,.34);
    font-size:18px;
  }

  /* Keep transient UI above app chrome. */
  .modal-wrap,.palette-wrap{
    z-index:300!important;
  }
  .toast{
    z-index:360!important;
    bottom:calc(var(--alter-mobile-tabbar-height) + 10px)!important;
  }

  /* Character editor becomes a real full-screen phone workflow. */
  .modal-wrap:has(.character-editor-modal){
    padding:0!important;
    place-items:stretch!important;
    background:#070a0e!important;
  }

  .character-editor-modal{
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:100dvh!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:#070a0e!important;
    box-shadow:none!important;
  }

  .character-editor-modal .modal-head{
    flex:0 0 auto;
    min-height:calc(54px + env(safe-area-inset-top));
    padding:
      calc(8px + env(safe-area-inset-top))
      12px
      8px!important;
    background:#070a0e!important;
    backdrop-filter:none!important;
  }

  .character-editor-modal .modal-head .micro{
    font-size:6px!important;
  }

  .character-editor-modal .modal-head h3{
    margin-top:3px!important;
    font-size:12px!important;
  }

  .character-editor-media{
    grid-template-columns:1fr 1fr!important;
    gap:1px!important;
    flex:0 0 auto;
  }

  .character-media-drop{
    min-height:92px!important;
    padding:8px!important;
    grid-template-columns:62px minmax(0,1fr)!important;
    gap:8px!important;
  }

  .character-media-drop>img,
  .character-media-placeholder{
    width:62px!important;
    height:72px!important;
    border-radius:8px!important;
  }

  .fingerprint-drop{
    grid-template-columns:62px minmax(0,1fr)!important;
  }

  #fingerprintPreview{
    width:62px!important;
    height:72px!important;
  }

  #fingerprintPreview .fingerprint-svg{
    width:58px!important;
    height:64px!important;
  }

  .character-media-drop strong{
    font-size:7px!important;
    line-height:1.35!important;
  }

  .character-media-drop span{
    margin-top:4px!important;
    font-size:6.5px!important;
    line-height:1.35!important;
  }

  .character-editor-tabs{
    position:sticky!important;
    top:0!important;
    z-index:5!important;
    padding:7px 8px!important;
    gap:4px!important;
    scrollbar-width:none;
  }
  .character-editor-tabs::-webkit-scrollbar{display:none}

  .character-editor-tabs button{
    min-height:30px!important;
    padding:0 10px!important;
    font-size:7px!important;
  }

  .character-editor-body{
    padding:12px!important;
    overscroll-behavior:contain;
  }

  .character-editor-section-label{
    margin-bottom:10px!important;
    font-size:7px!important;
  }

  .character-editor-fields{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .character-editor-fields .form-field{
    min-width:0;
  }

  .character-editor-fields input,
  .character-editor-fields select,
  .character-editor-fields textarea{
    font-size:16px!important;
  }

  .character-editor-fields textarea{
    min-height:108px!important;
  }

  .character-editor-modal .modal-foot{
    flex:0 0 auto;
    position:sticky!important;
    bottom:0!important;
    z-index:8!important;
    padding:
      9px
      12px
      calc(9px + env(safe-area-inset-bottom))!important;
    background:#070a0e!important;
    box-shadow:0 -10px 24px rgba(0,0,0,.34);
  }

  .character-editor-modal .modal-foot .btn{
    min-height:42px!important;
  }

  .character-editor-modal .modal-foot .btn.primary{
    flex:1;
  }

  .editor-drop-hint{
    display:none!important;
  }

  /* Quick Intel works as a touch-first launcher. */
  .quick-intel-modal{
    width:100%!important;
    max-width:none!important;
    max-height:86dvh!important;
    border-radius:18px 18px 0 0!important;
  }

  .quick-intel-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .quick-intel-grid button{
    min-height:96px!important;
    padding:12px!important;
  }

  /* Mobile pages should prioritize useful records over giant headings. */
  .page-head h2{
    font-size:22px!important;
  }

  .page-head p{
    display:none;
  }

  .page-head .eyebrow{
    font-size:7px!important;
  }

  .entity-grid{
    gap:10px!important;
  }

  /* Dashboard: fast glance first, detail below. */
  .content > .grid.cols-4{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }

  .content > .grid.cols-4 > .stat{
    min-height:112px!important;
    padding:13px!important;
  }

  .content > .grid.cols-4 > .stat .num{
    font-size:26px!important;
  }

  .content > .grid.cols-4 > .hero-card,
  .content > .grid.cols-4 > .card.card-pad,
  .content > .grid.cols-4 > .span-2{
    grid-column:1/-1!important;
  }
}

@media(max-width:390px){
  .character-media-drop{
    grid-template-columns:54px minmax(0,1fr)!important;
    padding:7px!important;
    gap:6px!important;
  }
  .character-media-drop>img,
  .character-media-placeholder,
  #fingerprintPreview{
    width:54px!important;
    height:66px!important;
  }
  .character-media-drop span{display:none!important}
}