/* ============================================================
   responsive.css — Mobile/responsive overrides for Q2019.
   Loaded for ALL clients, AFTER the legacy stylesheets, so its
   rules win on equal specificity. Legacy CSS is untouched.

   Strategy: the legacy layout is a fixed-width, float-based two
   column design (left character panel 310px + offset content).
   On narrow screens we collapse it into a single full-width
   stacked column. !important is used only where we must defeat
   inline styles in _template.php (which otherwise win).

   Rounds:
     R1 (this file, initial) - viewport + single-column collapse.
     R2 - top toolbar + nav reflow.
     R3 - in-content tables / map / forms overflow.
     R4 - polish (tap targets, fonts, logo).
   ============================================================ */

/* ============================================================
   BASE (all widths) — keep the restructured nav markup looking
   IDENTICAL to the legacy single-<ul> toolbar on desktop.
   Round 2 split the toolbar into two <ul>s (.tlbactions +
   .tlbsite) and added per-link icons (.ti) + labels (.tl).
   Desktop must ignore the icons and flow both lists on one row.
   ============================================================ */

/* Hide the nav icons on desktop; show the text labels (legacy look). */
#toolbarcontent .ti { display: none; }

/* Both lists were one <ul> before; make them flow inline so the
   floated <li>s (tlbleft/tlbright) lay out exactly as they used to. */
#toolbarcontent ul.tlbactions,
#toolbarcontent ul.tlbsite {
  display: inline;
}

/* The mobile-only external icon strip in the top bar is desktop-hidden. */
#tb_site_icons { display: none; }


/* Never let any element force a horizontal scrollbar wider than
   the viewport on small screens. */
@media (max-width: 768px) {

  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* The outer wrapper is 95% wide on desktop; on mobile take the
     full width and drop the side borders so content isn't inset. */
  #wrapper {
    width: 100%;
    border-left: 0;
    border-right: 0;
  }

  /* ---- Top toolbar (char select / Hide / premium / logout) ----
     Inline styles in _template.php hard-code min-width:812px;
     width:820px and display:table, which overflow a 390px screen.
     Force it fluid; full reflow of its contents is Round 2. */
  #top_toolbar_box {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* ---- Column collapse: stack left panel above main content ----
     #left is float:left; width:310px and #middle has
     margin-left:315px. Unset both so each becomes a full-width
     block that stacks vertically. */
  #left {
    float: none !important;
    width: auto !important;
    margin: 0 0 10px 0 !important;
  }

  #middle,
  #widemiddle {
    margin: 0 !important;
  }

  /* #main1 has a right margin that, combined with full width,
     can cause minor overflow; normalize it. */
  #main1 {
    margin: 10px 0 0 0;
  }

  /* Keep any boxed content inside the column width, and give it a small
     gutter so content isn't pressed flush against the screen edges. The
     full-bleed chrome (top bar, nav action bar, bottom Context Bar) lives
     outside these columns and is intentionally not inset. */
  .column-in {
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* ---- R2: Hide the cityscape logo banner ----
     #header/#logo is the 90px QUARANTINE 2019 banner that sits
     between the character bar and the navbar. Reclaim that space
     on mobile. */
  #header { display: none !important; }

  /* ---- R2: Top bar — lift external link icons in, right-aligned ----
     The char-select sits left; the Game-Guide / Discord / Reddit
     icons sit right. The legacy #tb_content_right (premium / patch /
     rules / settings / logout text) doesn't fit on a phone, so it's
     hidden here (those remain reachable: Settings/Logout via the
     toolbar/menus, patch notes via the top bar on desktop). */
  #top_toolbar_box {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    height: auto !important;
  }

  #tb_content_right { display: none !important; }

  /* The decorative end-cap images assume the fixed 820px bar; as flex
     children their negative margins push content past the viewport. */
  #top_toolbar_box .tb_endcap { display: none !important; }

  #tb_site_icons {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;       /* push the icon group to the right */
    padding-right: 8px;      /* keep the last icon off the screen edge */
  }
  #tb_site_icons a { line-height: 0; }
  #tb_site_icons img {
    width: 22px;
    height: 22px;
    display: block;
  }

  /* ---- R2: Navbar -> single in-game action bar of icons ----
     The toolbar's site links move to the top bar above, so hide the
     in-toolbar copy. The action items become an evenly spaced icon
     row that fits one line at 390px. */
  #toolbar {
    height: auto;
  }
  #toolbarcontent,
  #toolbarcontent2 {
    height: auto;
    background-image: none;   /* the divider end-caps assume fixed height */
    margin: 0;
  }

  #toolbarcontent ul.tlbsite { display: none !important; }

  #toolbarcontent ul.tlbactions {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #toolbarcontent ul.tlbactions li.tlbleft {
    float: none;
    flex: 1 1 0;              /* equal width, 6 across */
    background-image: none;   /* drop the legacy divider bg image */
    text-align: center;
  }

  #toolbarcontent ul.tlbactions li.tlbleft a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    line-height: 1.1;
    padding: 8px 2px;         /* generous vertical tap target */
  }

  /* Show the icon, hide the text by default (icon-only). */
  #toolbarcontent ul.tlbactions .ti {
    display: block;
    width: 24px;
    height: 24px;
  }
  #toolbarcontent ul.tlbactions .tl {
    display: none;
    font-size: 10px;
    margin-top: 3px;
  }

  /* Fallback / opt-in: body.nav-labels shows captions under icons. */
  body.nav-labels #toolbarcontent ul.tlbactions .tl {
    display: block;
  }

  /* ====================================================================
     R3: Context Bar + ContentView (new mobile system, mobile_ui.js)
     The legacy in-page game tab bar and its content wrapper are hidden;
     the new ContentView shows one fetched panel at a time, driven by a
     bottom-pinned Context Bar. The Character box stays separate.
     ==================================================================== */

  /* Hide the legacy game tab bar + its content wrapper on mobile. They are
     NOT removed (desktop and legacy-mode keep using them) -- just hidden. */
  #maintabs { display: none !important; }
  .m_legacy_hidden { display: none !important; }

  /* The sidebar Local Map moves into the Context Bar's Map view on mobile, so
     hide the sidebar copy. The Character box (player_info_sidebar) stays. */
  .m_sidebar_map { display: none !important; }

  /* Leave room at the bottom so the fixed Context Bar never covers content. */
  body { padding-bottom: 60px; }

  /* ---- ContentView ---- */
  #m_contentview {
    width: 100%;
    box-sizing: border-box;
  }
  #m_contentview .m_panel {
    width: 100%;
    box-sizing: border-box;
  }
  .m_loader {
    padding: 30px 10px;
    text-align: center;
    color: #cdcdcd;
  }

  /* On mobile, hide the inline "Recent events" block inside the fetched
     Building fragment -- Recent has its own Context Bar tab now. */
  #m_panel_building #game_index_info_events,
  #m_panel_building .game_events_inline {
    display: none;
  }

  /* ---- Context Bar (bottom-pinned tab set) ---- */
  #m_contextbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    display: flex;
    height: 56px;
    background: #171717;
    border-top: 1px solid #869927;
  }
  #m_contextbar .m_ctx_btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #9aa0a6;
    border: 0;
    background: transparent;
    line-height: 1;
  }
  #m_contextbar .m_ctx_icon {
    width: 24px;
    height: 24px;
    /* default (inactive) icons are dimmed; active gets full white + glow */
    opacity: 0.55;
  }
  #m_contextbar .m_ctx_label {
    font-size: 10px;
    margin-top: 4px;
  }

  /* Active selection: brighten + green "glow". */
  #m_contextbar .m_ctx_btn.m_active {
    color: #cde08a;
  }
  #m_contextbar .m_ctx_btn.m_active .m_ctx_icon {
    opacity: 1;
    filter: drop-shadow(0 0 5px #aadb3f) drop-shadow(0 0 2px #aadb3f);
  }

  /* ---- Messages badge (top-right) ---- */
  #m_msgbadge {
    position: fixed;
    top: 4px;
    right: 8px;
    z-index: 9500;
    display: inline-block;
    line-height: 0;
  }
  #m_msgbadge img {
    width: 24px;
    height: 24px;
    display: block;
  }
  #m_msgbadge .m_badge_count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 8px;
    background: #c0392b;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    font-weight: bold;
  }

  /* ---- Messages overlay ---- */
  #m_msg_overlay {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 9600;
    background: rgba(0,0,0,0.6);
  }
  #m_msg_panel {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 56px; /* clear the Context Bar */
    background: #1a1a1a;
    display: flex;
    flex-direction: column;
  }
  #m_msg_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #869927;
    color: #fff;
    font-weight: bold;
  }
  #m_msg_head a { color: #fff; text-decoration: none; font-size: 16px; }
  #m_msg_body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 8px;
  }

  /* ====================================================================
     MiscDrawer (mobile_ui.js) — app-global slide-out side menu.
     Hosts the low-frequency chrome the legacy #footer carried (Change
     Password / Settings / Game Rules + copyright), which is hidden on
     mobile to reclaim the footer's vertical space. Built once per boot,
     independent of any page config (present on every mobile page).
     ==================================================================== */

  /* Hide the legacy footer on mobile; its contents live in the drawer.
     Not removed -- desktop / legacy mode keep using it. */
  #footer { display: none !important; }

  /* ---- Trigger: top-left hamburger (mirrors the top-right msg badge) ---- */
  #m_miscbtn {
    position: fixed;
    top: 4px;
    left: 8px;
    z-index: 9500;
    display: inline-block;
    line-height: 0;
  }
  #m_miscbtn img {
    width: 24px;
    height: 24px;
    display: block;
  }

  /* ---- Scrim + sliding panel ---- */
  #m_drawer_overlay {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 9600;
    background: rgba(0,0,0,0.6);
  }
  #m_drawer {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 78%;
    max-width: 300px;
    background: #1a1a1a;
    border-right: 1px solid #869927;
    display: flex;
    flex-direction: column;
    /* Slide in from the left: start off-screen, animate to 0. */
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
  }
  #m_drawer.m_open { transform: translateX(0); }

  #m_drawer_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #869927;
    color: #fff;
    font-weight: bold;
  }
  #m_drawer_head a { color: #fff; text-decoration: none; font-size: 16px; }

  #m_drawer_links {
    flex: 1 1 auto;
    overflow: auto;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #m_drawer_links li {
    list-style: none;
    margin: 0;
    text-indent: 0 !important;   /* override any inherited list indent */
  }
  #m_drawer_links .m_drawer_link {
    display: block;
    padding: 14px 16px;          /* generous tap target */
    color: #cdcdcd;
    text-decoration: none;
    border-bottom: 1px solid #2a2a2a;
    font-weight: bold;
  }
  #m_drawer_links .m_drawer_link:active { background: #222; }

  #m_drawer_foot {
    padding: 12px 16px;
    color: #777;
    font-size: 11px;
    line-height: 1.4;
  }
  #m_drawer_foot a { color: #869927; text-decoration: none; }

  /* ====================================================================
     R3.x: Stats nav -> horizontal scrolling pill bar.
     The desktop stats sidebar is a tall vertical list of category page
     links that, when stacked on mobile, pushes the actual stats content
     ~260px down. Restyle it into a single compact, sideways-scrolling
     row of pills. Pure CSS -- each pill is still a normal page link.
     ==================================================================== */

  /* Collapse the table chrome so the menu isn't a boxed widget. */
  #stats_nav_box,
  #stats_nav_box tbody,
  #stats_nav_box tr,
  #stats_nav_box td {
    display: block;
    width: auto !important;
    border: 0;
    padding: 0;
    margin: 0;
  }
  /* Drop the "Stats" header row and the <br> spacers on mobile. */
  #stats_nav_box .boxheader { display: none; }
  #stats_nav .m_hide { display: none; }

  /* The list becomes a horizontal, swipeable strip. */
  #stats_nav {
    display: flex;
    gap: 6px;
    margin: 0 0 8px 0;
    padding: 6px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    background: #1a1a1a;
    border-bottom: 1px solid #869927;
  }
  #stats_nav li {
    display: inline-block;
    list-style: none;
    margin: 0;
    text-indent: 0 !important;   /* override the inline text-indent */
    flex: 0 0 auto;
  }

  /* Pills. */
  #stats_nav .stats_nav_link {
    display: block;
    padding: 7px 14px;
    border: 1px solid #869927;
    border-radius: 14px;
    color: #cdcdcd;
    text-decoration: none;
    font-weight: bold;
    background: #222;
  }
  /* Current page: filled green pill. */
  #stats_nav .stats_nav_link.m_active {
    background: #869927;
    color: #fff;
    border-color: #aadb3f;
  }

  /* ---- Stats charts: scale to fit the screen ----
     The stat charts are fixed-size pre-rendered PNGs (trend graphs are
     800px wide, pie charts 600px) so they overflow a phone. Scale them
     down proportionally to the available width. Targets the stats image
     path so no per-view markup change is needed. */
  img[src*="/images/stats/"] {
    max-width: 100%;
    height: auto;
  }

  /* ====================================================================
     Groups nav -> top-right action buttons.
     The groups / group-management sidebars are tall lists of links plus
     non-link content (search forms, the manage-page info block). On mobile
     the links become a compact, right-aligned, wrapping cluster of action
     buttons; the search forms and info block stay inline in normal flow.
     Pure CSS -- each button is still a normal page link.
     ==================================================================== */

  /* Strip the table chrome so sections lay out as blocks. */
  #groups_nav_box, #groups_nav_box tbody, #groups_nav_box tr, #groups_nav_box td,
  #groups_manage_nav_box, #groups_manage_nav_box tbody, #groups_manage_nav_box tr, #groups_manage_nav_box td {
    display: block;
    width: auto !important;
    border: 0;
    padding: 0;
    margin: 0;
  }

  /* Section headers become small right-aligned labels above their buttons. */
  #groups_nav_box .m_navhead .boxheader,
  #groups_manage_nav_box .m_navhead .boxheader {
    background: none;
    border: 0;
    padding: 6px 0 2px 0;
    text-align: right;
    color: #aab86a;
    font-size: 11px;
    text-transform: uppercase;
  }

  /* The link list becomes a right-aligned wrapping button cluster. */
  .m_navlinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;   /* top-right alignment */
    gap: 6px;
    margin: 0 0 6px 0;
    padding: 0;
  }
  .m_navlinks li {
    display: inline-block;
    list-style: none;
    margin: 0;
    text-indent: 0 !important;   /* kill the &nbsp;/indent used on desktop */
    flex: 0 0 auto;
  }
  /* Drop the leading &nbsp; spacing nodes that indented sub-links on desktop. */
  .m_navlinks li { white-space: nowrap; }

  .m_navlinks .grp_nav_link {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #869927;
    border-radius: 14px;
    background: #222;
    color: #cdcdcd;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
  }
  .m_navlinks .grp_nav_link.m_active {
    background: #869927;
    color: #fff;
    border-color: #aadb3f;
  }
  /* Member-count text that follows some links (e.g. "(3 members)") -- keep it
     readable but small, on its own next to the button. */
  #groups_manage_nav_box .m_navlinks li { font-size: 11px; color: #9aa0a6; }

  /* The manage-page info block + search forms stay as normal stacked content. */
  #groups_nav_box .m_navform,
  #groups_manage_nav_box .m_navinfo,
  #groups_manage_nav_box .m_navform {
    display: block;
    text-align: left;
    margin-top: 6px;
  }

  /* ---- Groups Context Bar: hide the original page content ----
     When mobile_ui.js boots the groups config it adds body.m_page_groups.
     The Context Bar's panels (#m_contentview) become the only content; the
     original sidebar (#left) and the in-page group list rendered straight
     into #pagecontent are hidden so nothing renders twice. The injected
     #m_contentview is explicitly kept. */
  body.m_page_groups #left { display: none !important; }
  body.m_page_groups #pagecontent > *:not(#m_contentview) { display: none !important; }

  /* ====================================================================
     Interaction & layout standards (apply to every converted page).
     See _specs/mobile/mobile-conversion-framework.md.

       1. Lists -> Table -> whole-row activation (.m_list / .m_list_row)
       2. Tap-target spacing + edge deadzone (.m_tap)

     The Groups list is the reference implementation of #1.
     ==================================================================== */

  /* ---- Lists: spaced table, the whole row is the tap target ----
     The desktop list packs rows tight (e.g. groups was table.tabular whose
     only hit target was the inner group-name link). On mobile the rows get
     room to breathe and the ENTIRE row activates (mobile_ui.js navigates the
     row's data-href). The inner <a> stays for desktop/legacy + keyboard. */
  table.m_list {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }
  table.m_list th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #869927;
    color: #aab86a;
    font-size: 11px;
    text-transform: uppercase;
  }
  table.m_list td {
    padding: 14px 10px;            /* generous row height -> easy to read + aim */
    border-bottom: 1px solid #2a2a2a;
    vertical-align: middle;
  }
  /* The row is tappable: pointer cursor + a clear pressed state so the whole
     row reads as one target, and the inner link looks like plain text. */
  tr.m_list_row { cursor: pointer; }
  tr.m_list_row:active td { background: #222; }
  tr.m_list_row a {
    text-decoration: none;
    /* The link no longer needs to be the visible affordance -- the row is.
       It stays in the DOM for desktop/legacy and keyboard users. */
  }

  /* ---- Tap-target spacing + edge deadzone ----
     Touch is imprecise. Any actionable control opts into .m_tap to get an
     enlarged hit area (inner padding) PLUS a non-activating gap from its
     neighbours (outer margin = the deadzone), so a slightly-off tap lands in
     dead space instead of firing the control next to it. Existing clusters
     (.m_navlinks gap, the ContextBar's flexed segments) are the baseline; use
     .m_tap for standalone buttons/links that don't already sit in one. */
  .m_tap {
    display: inline-block;
    padding: 10px 14px;            /* enlarge the target itself */
    margin: 4px;                   /* deadzone: non-activating gap to neighbours */
    min-height: 24px;
    min-width: 24px;
    box-sizing: border-box;
  }

  /* ---- TitleHeader (.m_titlebar) ----
     Built by Layout::MobileTitleHeader(). Screen title (ALL CAPS) on the left,
     vertically centered with a small left margin; major actions as right-aligned
     icon buttons. Markup is always emitted; only shown on mobile. */
  .m_titlebar {
    display: flex;
    align-items: center;           /* vertically center title + actions */
    justify-content: space-between;
    min-height: 44px;
    padding: 4px 6px 4px 0;
    background: #171717;
    border-bottom: 1px solid #869927;
  }
  .m_titlebar_title {
    flex: 1 1 auto;
    margin-left: 10px;             /* small left margin */
    text-transform: uppercase;     /* uppercase via CSS, not in PHP */
    letter-spacing: 0.5px;
    font-weight: bold;
    color: #cde08a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;       /* long titles truncate, never wrap/overflow */
  }
  .m_titlebar_actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }
  /* Icon buttons: enlarged hit area (padding) + a deadzone gap (margin) between
     adjacent actions so they can't be mis-tapped -- the tap-target standard. */
  .m_titlebar_action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;                  /* enlarge target */
    margin: 0 2px;                 /* deadzone between adjacent action icons */
    min-width: 24px;
    min-height: 24px;
    box-sizing: border-box;
    line-height: 0;
  }
  .m_titlebar_action img {
    width: 24px;
    height: 24px;
    display: block;
  }
  .m_titlebar_action:active { opacity: 0.6; }
}