/* phone: two- and three-column content grids stack into one column (tab
   bars, button rows and auto-fill grids are left alone -- they already fit) */
html.m :is(.ec-2col,.dp-2col,.dp-3col,.dp-4grid,.dp-acts,.dp-repsplit,.ch-twocol,.ch-ptrow,
  .ch-studyopts,.ig-4grid,.ig-opcols,.ml-sides,.ml-camps,.cn-lessons,.bd-rtabs){grid-template-columns:1fr!important}
/* four-up bands, stat strips and the four ranking tabs: two by two */
html.m :is(.ml-tot,.ml-umeta,.ml-skills,.rk-tabs){grid-template-columns:1fr 1fr!important}
/* a lever row: the label narrows and the slider is allowed to shrink, so the
   reading at its end stays on screen */
html.m .ec-field label{flex-basis:96px!important}
html.m .ec-slider{min-width:0}
html.m .ec-slider .sv{flex:0 0 auto!important;min-width:3.2em}
/* choice chips wrap instead of running off the edge */
html.m .ml-seg{display:flex!important;flex-wrap:wrap;gap:6px}
/* operation medallions: three across inside each group */
html.m .ig-opcol{display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px}
html.m .ig-opcol>.ig-opcol-h{grid-column:1/-1}
/* a character's status line: its two buttons (Recall, Back to Roster) take
   their own row rather than being pushed out of the box */
html.m .ch-statusbar{flex-wrap:wrap}
html.m .ch-sbtns{flex:1 1 100%;grid-template-columns:1fr 1fr!important}
/* the court: three portraits across */
html.m .ch-roster{grid-template-columns:repeat(3,1fr)!important}
/* the Characters tabs: two to a row (W11 added Quests) */
html.m .ch-tabs{grid-template-columns:1fr 1fr}
/* a popup's title row keeps clear of the close button */
html.m .hdr-popup .lp-body>:first-child{padding-right:34px}
/* mail (Inbox, Alerts messages): folders become a row of chips, the list
   fills the sheet, and a message opens on its own with a way back */
html.m .ib-cols{flex-direction:column}
html.m .ib-folders{flex:0 0 auto!important;display:flex;overflow-x:auto;gap:4px;padding:4px!important;scrollbar-width:none}
html.m .ib-folder{flex:0 0 auto;white-space:nowrap;border:1px solid #2a3a4a}
html.m .ib-folders .ib-folder{padding-left:.55em!important}
html.m .ib-folders .ib-fname{flex:0 0 calc(100% - 8px);margin:0}
html.m .ib-list{flex:1 1 auto!important}
html.m .ib-view{display:none!important}
html.m .m-drill .ib-folders,html.m .m-drill .ib-list{display:none!important}
html.m .m-drill .ib-view{display:flex!important;flex:1 1 auto}
/* chat: the game feed is one pane, so it shows at once with no back button */
html.m #chat-popup.ch-game .ib-view{display:flex!important;flex:1 1 auto}
html.m #chat-popup.ch-game .m-back{display:none!important}
/* Building -> Buildings: the whole building, two to a row; a tap opens its
   detail and cost table full width, with a way back to the list */
html.m .bd-blwrap{flex-direction:column}
html.m .bd-bllist{flex:1 1 auto!important;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;border:0!important;padding:0!important}
html.m .bd-blpil{grid-column:1/-1;padding:8px 2px 0!important;font-size:12px!important}
html.m .bd-blrow{flex-direction:column;gap:6px;padding:8px 6px!important;border:1px solid #2a3a4a;background:#0e1c2b;text-align:center}
html.m .bd-blthumb{width:100%!important;height:110px!important;object-fit:contain;background:#0a121a!important}
html.m .bd-blname{font-size:15px!important}
html.m .bd-detail{display:none!important}
html.m .m-drill .bd-bllist{display:none!important}
html.m .m-drill .bd-detail{display:block!important;flex:1 1 auto}
.m-back{display:none}
html.m .m-back{display:inline-flex;align-self:flex-start;align-items:center;gap:4px;margin:0 0 .6em;padding:5px 12px 5px 8px;
  border:1px solid #8d660f;border-radius:16px;background:#16202a;color:#E3C069;font:700 14px 'Times New Roman',serif;cursor:pointer}