/* 1.0.0-beta.5.7.2 — comprehensive phone usability hardening. */
html,body{max-width:100%;overflow-x:clip}
@media(max-width:760px){
  html{scroll-padding-top:76px;scroll-padding-bottom:calc(var(--mobile-nav-height,66px) + env(safe-area-inset-bottom) + 44px)}
  body.mobile-layout{min-width:0;overscroll-behavior-x:none}
  body.mobile-layout main{min-width:0;padding-bottom:calc(var(--mobile-nav-height,66px) + env(safe-area-inset-bottom) + 56px)!important}
  body.mobile-layout .tab-panel:not([hidden]){min-width:0;padding-bottom:calc(var(--mobile-nav-height,66px) + env(safe-area-inset-bottom) + 58px)!important}
  body.mobile-layout .shell,body.mobile-layout .card,body.mobile-layout .overview-card,body.mobile-layout .thread-card,body.mobile-layout .place-card,body.mobile-layout .relation,body.mobile-layout .event{min-width:0;max-width:100%}

  /* Every important control gets a reliable finger-sized hit area. */
  body.mobile-layout button,body.mobile-layout [role="button"]{min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  body.mobile-layout .section-magic-relic,
  body.mobile-layout #beta512BestiaryRelic,
  body.mobile-layout .qol139-card-menu,
  body.mobile-layout .card-favorite,
  body.mobile-layout .profile-nav button,
  body.mobile-layout #profileModal .modal-head .btn.small,
  body.mobile-layout .relation-toolbar .btn.small{min-width:44px!important;width:44px!important;height:44px!important;padding:0!important;display:inline-grid!important;place-items:center!important}
  body.mobile-layout .thread-quest-tag{min-width:44px;min-height:44px;padding:8px 10px}
  body.mobile-layout .modal-head [data-close],body.mobile-layout .modal-head .btn{min-height:44px}

  /* Read-only status was a floating obstruction on player phones. */
  body.entry-published.mobile-layout #qolSaveStatus{display:none!important}

  /* Bottom navigation remains swipeable, but now clearly snaps and never steals vertical gestures. */
  body.mobile-layout .tabs{
    scroll-snap-type:x proximity;scroll-behavior:smooth;touch-action:pan-x;
    overscroll-behavior-inline:contain;padding-bottom:calc(6px + env(safe-area-inset-bottom))!important;
  }
  body.mobile-layout .tabs .tab{scroll-snap-align:center;scroll-snap-stop:normal;min-height:52px}

  /* The tool drawer is always anchored to the viewport, even after the page has been scrolled. */
  body.mobile-layout.mobile-tools-open .topbar{
    position:fixed!important;inset:0 0 auto 0!important;transform:none!important;width:100%!important;z-index:15520!important;
    padding-top:env(safe-area-inset-top);background:rgba(12,13,18,.98)!important;
  }
  body.mobile-layout.mobile-tools-open #mobileToolsBtn{
    position:fixed!important;top:calc(11px + env(safe-area-inset-top))!important;right:20px!important;left:auto!important;z-index:15540!important;
  }
  body.mobile-layout.mobile-tools-open #mainToolbar{
    position:fixed!important;left:8px!important;right:8px!important;top:calc(70px + env(safe-area-inset-top))!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;width:auto!important;height:auto!important;max-height:none!important;
    margin:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;z-index:15530!important;padding-bottom:18px!important;
  }
  body.mobile-layout.mobile-tools-open .mobile-tools-backdrop{position:fixed!important;inset:0!important;z-index:15510!important}

  /* Complete section switcher inside the drawer: no hidden destination depends on horizontal swiping. */
  .beta550-mobile-sections{display:block;min-height:0!important;height:auto!important;margin:0 0 10px;padding:12px!important;border:1px solid rgba(210,177,116,.24);border-radius:14px;background:rgba(255,255,255,.018)}
  .beta550-mobile-sections-title{margin:0 0 9px;color:var(--gold);font:700 10px/1.2 Georgia,serif;letter-spacing:.14em;text-transform:uppercase}
  .beta550-mobile-sections-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .beta550-mobile-section-btn{min-width:0!important;min-height:48px!important;padding:7px 5px!important;border:1px solid rgba(210,177,116,.18)!important;border-radius:10px!important;background:rgba(255,255,255,.025)!important;color:var(--muted)!important;font-size:10px!important;line-height:1.15!important;white-space:normal!important}
  .beta550-mobile-section-btn.is-active{border-color:rgba(210,177,116,.5)!important;background:linear-gradient(145deg,rgba(139,58,80,.28),rgba(210,177,116,.08))!important;color:var(--ink)!important;box-shadow:inset 0 -2px 0 rgba(210,177,116,.55)}

  /* All mobile dialogs keep their close controls and action bars visible. */
  body.mobile-layout .modal-backdrop.open{padding:0!important;overflow:hidden!important;align-items:flex-end!important}
  body.mobile-layout .modal-backdrop.open>.modal{max-height:100dvh!important;margin:0!important;overflow:hidden!important}
  body.mobile-layout .modal-head{position:sticky!important;top:0!important;z-index:70!important;flex:0 0 auto;background:rgba(20,18,25,.985)!important;padding-top:calc(12px + env(safe-area-inset-top))!important}
  body.mobile-layout .modal-body{min-height:0;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch;padding-bottom:calc(24px + env(safe-area-inset-bottom))!important}
  body.mobile-layout .modal-foot{position:sticky!important;bottom:0!important;z-index:70!important;flex:0 0 auto;flex-wrap:wrap!important;background:rgba(20,18,25,.985)!important;padding-bottom:calc(14px + env(safe-area-inset-bottom))!important}
  body.mobile-layout .modal-foot>.btn,body.mobile-layout .modal-foot>div{min-width:0;max-width:100%}

  /* Toasts live above navigation and never become permanent page furniture. */
  body.mobile-layout .toast-stack,body.mobile-layout #toastStack{left:10px!important;right:10px!important;width:auto!important;bottom:calc(var(--mobile-nav-height,66px) + env(safe-area-inset-bottom) + 18px)!important;max-height:34dvh;overflow:hidden;pointer-events:none!important}
  body.mobile-layout .toast{max-width:100%;overflow-wrap:anywhere}

  /* Stable scrolling around fixed controls and form focus. */
  body.mobile-layout input,body.mobile-layout select,body.mobile-layout textarea,body.mobile-layout button{scroll-margin-top:84px;scroll-margin-bottom:calc(var(--mobile-nav-height,66px) + env(safe-area-inset-bottom) + 30px)}
}
@media(max-width:370px){
  .beta550-mobile-sections-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.mobile-layout .tabs .tab{min-width:72px;padding-inline:7px}
}
@media(max-width:760px) and (orientation:landscape){
  body.mobile-layout.mobile-tools-open #mainToolbar{top:58px!important}
  body.mobile-layout .modal-head{padding-top:8px!important}
  body.mobile-layout .modal-backdrop.open>.modal{max-height:100dvh!important}
}

/* Coarse-pointer safeguards also cover phones held in landscape, where CSS width can exceed 760px. */
@media(pointer:coarse){
  body.mobile-layout button,body.mobile-layout [role="button"]{min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  body.entry-published.mobile-layout #qolSaveStatus{display:none!important}
  body.mobile-layout .section-magic-relic,
  body.mobile-layout #beta512BestiaryRelic,
  body.mobile-layout .qol139-card-menu,
  body.mobile-layout .card-favorite,
  body.mobile-layout .profile-nav button,
  body.mobile-layout #profileModal .modal-head .btn.small,
  body.mobile-layout .relation-toolbar .btn.small{min-width:44px!important;width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;display:inline-grid!important;place-items:center!important}
  body.mobile-layout .thread-toggle{min-height:44px;display:flex;align-items:center;gap:10px;padding-block:7px;cursor:pointer}
  body.mobile-layout .thread-toggle input[type="checkbox"]{width:20px;height:20px;min-width:20px;min-height:20px;accent-color:var(--wine-2)}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
  body.mobile-layout{overscroll-behavior-x:none}
  body.mobile-layout.mobile-tools-open .topbar{position:fixed!important;inset:0 0 auto 0!important;transform:none!important;width:100%!important;z-index:15520!important;padding-top:env(safe-area-inset-top)!important;background:rgba(12,13,18,.99)!important}
  body.mobile-layout main{min-width:0;padding-bottom:calc(66px + env(safe-area-inset-bottom))!important}
  body.mobile-layout .tab-panel:not([hidden]){min-width:0;padding-bottom:calc(70px + env(safe-area-inset-bottom))!important}
  body.mobile-layout.mobile-tools-open #mobileToolsBtn{
    position:fixed!important;top:calc(8px + env(safe-area-inset-top))!important;right:12px!important;left:auto!important;
    z-index:15540!important;min-width:104px!important;width:auto!important;height:44px!important;padding:0 13px!important;
    background:rgba(20,18,25,.99)!important;border-color:rgba(210,177,116,.42)!important;box-shadow:0 8px 24px rgba(0,0,0,.48)!important;
  }
  body.mobile-layout.mobile-tools-open #mainToolbar{
    position:fixed!important;left:8px!important;right:auto!important;top:calc(58px + env(safe-area-inset-top))!important;
    bottom:calc(6px + env(safe-area-inset-bottom))!important;width:min(560px,calc(100vw - 16px))!important;height:auto!important;max-height:none!important;
    margin:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch;
    z-index:15530!important;padding:12px 14px 18px!important;background:rgba(14,14,20,.99)!important;
  }
  body.mobile-layout.mobile-tools-open .mobile-tools-backdrop{position:fixed!important;inset:0!important;z-index:15510!important}
  .beta550-mobile-sections{display:block!important;min-height:0!important;height:auto!important;margin:0 0 10px!important;padding:10px!important;border:1px solid rgba(210,177,116,.24)!important;border-radius:14px!important;background:rgba(255,255,255,.018)!important}
  .beta550-mobile-sections-title{margin:0 0 8px!important;color:var(--gold)!important;font:700 10px/1.2 Georgia,serif!important;letter-spacing:.14em!important;text-transform:uppercase!important}
  .beta550-mobile-sections-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important}
  .beta550-mobile-section-btn{min-width:0!important;min-height:44px!important;padding:6px 4px!important;border:1px solid rgba(210,177,116,.18)!important;border-radius:9px!important;background:rgba(255,255,255,.025)!important;color:var(--muted)!important;font-size:10px!important;line-height:1.1!important;white-space:normal!important}
  .beta550-mobile-section-btn.is-active{border-color:rgba(210,177,116,.5)!important;background:linear-gradient(145deg,rgba(139,58,80,.28),rgba(210,177,116,.08))!important;color:var(--ink)!important;box-shadow:inset 0 -2px 0 rgba(210,177,116,.55)!important}
  body.mobile-layout .modal-backdrop.open{padding:0!important;overflow:hidden!important;align-items:flex-end!important}
  body.mobile-layout .modal-backdrop.open>.modal{display:flex!important;flex-direction:column!important;width:100%!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:0!important;overflow:hidden!important}
  body.mobile-layout .modal-head{position:sticky!important;top:0!important;z-index:70!important;flex:0 0 auto!important;background:rgba(20,18,25,.99)!important;padding:8px 14px!important}
  body.mobile-layout .modal-body{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch;padding-bottom:calc(18px + env(safe-area-inset-bottom))!important}
  body.mobile-layout .modal-foot{position:sticky!important;bottom:0!important;z-index:70!important;flex:0 0 auto!important;flex-wrap:wrap!important;background:rgba(20,18,25,.99)!important;padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}
  body.mobile-layout .tabs{scroll-snap-type:x proximity;touch-action:pan-x;overscroll-behavior-inline:contain}
}


/* Every touch-screen modal is a real viewport-sized flex sheet; long content scrolls inside, not behind the fixed close button. */
@media(pointer:coarse){
  body.mobile-layout .modal-backdrop.open{padding:0!important;overflow:hidden!important;align-items:flex-end!important}
  body.mobile-layout .modal-backdrop.open>.modal{display:flex!important;flex-direction:column!important;width:100%!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;overflow:hidden!important;border-radius:0!important}
  body.mobile-layout .modal-head{flex:0 0 auto!important}
  body.mobile-layout .modal-body,
  body.mobile-layout .modal>.view-scroll-region,
  body.mobile-layout .modal>.chronicle-desk-shell,
  body.mobile-layout .modal>.beta5-shell,
  body.mobile-layout .modal>.codex-layout{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch}
  body.mobile-layout .modal-foot{flex:0 0 auto!important}
}


/* Final mobile pass: generous safe space, consistent compact targets and stable drawer scrolling. */
@media(pointer:coarse){
  body.mobile-layout main{padding-bottom:calc(var(--mobile-nav-height,66px) + env(safe-area-inset-bottom) + 96px)!important}
  body.mobile-layout .tab-panel:not([hidden]){padding-bottom:calc(var(--mobile-nav-height,66px) + env(safe-area-inset-bottom) + 104px)!important}
  body.mobile-layout input[type="checkbox"],body.mobile-layout input[type="radio"]{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important}
  body.mobile-layout label:has(input[type="checkbox"]),body.mobile-layout label:has(input[type="radio"]){min-height:44px;align-items:center}
  body.mobile-layout .thread-quest-tag{min-width:44px!important;min-height:44px!important;padding:8px 10px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
  body.mobile-layout:not(.entry-published) #qolSaveStatus{min-width:44px!important;width:44px!important;height:44px!important}
}


/* Profile dossier: labels stay readable instead of being squeezed into square icon targets. */
@media(pointer:coarse){
  body.mobile-layout #profileModal .modal-head>[data-close]{width:auto!important;min-width:86px!important;height:44px!important;padding:0 12px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important}
  body.mobile-layout #profileModal .profile-nav{display:flex!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity!important;scrollbar-width:none!important;padding:4px 2px!important;touch-action:pan-x!important}
  body.mobile-layout #profileModal .profile-nav::-webkit-scrollbar{display:none}
  body.mobile-layout #profileModal .profile-nav button{width:auto!important;min-width:max-content!important;height:44px!important;min-height:44px!important;padding:0 10px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;scroll-snap-align:start!important}
}


/* beta550 profile close label width */
@media(pointer:coarse){body.mobile-layout #profileModal .modal-head>button.btn.small[data-close="profileModal"]{grid-column:2!important;grid-row:1!important;justify-self:end!important;width:86px!important;min-width:86px!important;max-width:86px!important;height:44px!important;padding:0 10px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important}}