/* Realm Console — phone and tablet layout.
 *
 * Loaded last by every page so it can override the desktop rules without any of
 * them having to know it exists.
 *
 * The console was built for a monitor next to a game window, and the desktop
 * layout is right for that. This does not try to reproduce it on a 390px screen;
 * it makes the same pages usable one-handed:
 *
 *   - the header stops being a single row and the tabs scroll sideways
 *   - the toolbar stacks, and the search box gets the full width
 *   - the filter grid collapses to one column
 *   - tables keep every column but scroll horizontally with the FIRST column
 *     pinned, so you can always see which row you are reading. Hiding columns
 *     was the alternative and it is worse: the one you hide is the one somebody
 *     needed, and the tables here are built from JS column lists that would have
 *     to be kept in sync with a stylesheet.
 *   - dialogs fill the screen rather than floating in the middle of it
 *   - tap targets get bigger
 */

/* ------------------------------------------------------------ tablet and below */

@media (max-width: 900px) {
  .ah-filters { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  .results { width: 15rem; }
}

/* ----------------------------------------------------------------- phone */

@media (max-width: 700px) {

  /* The 100%-height flex shell assumes a desktop viewport. On a phone the
     browser chrome shrinks and grows as you scroll, and a locked 100% height
     traps the content in a box that cannot scroll with it. */
  html, body { height: auto; min-height: 100%; }
  .app { height: auto; min-height: 100%; }

  /* ---- header ---- */

  header.bar {
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .6rem;
  }
  .brand { font-size: .68rem; }
  /* The identity pill is the first thing worth losing: it says who you are, and
     on a phone you are the only person who could be holding it. */
  header.bar .pill#mePill { display: none; }
  /* The gold pill STAYS. It is the one header item that changes, and it is the
     reason to glance at the header at all on a phone. */
  header.bar .pill#goldPill { display: inline-flex; order: 5; }
  header.bar .spacer { display: none; }

  /* Seven tabs do not fit. Rather than a hamburger — which hides navigation
     behind a tap and needs script — they scroll, with the current one visible
     because it is the one the browser is showing. */
  nav.tabs {
    order: 10;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .15rem;
  }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs a { white-space: nowrap; padding: .35rem .6rem; }

  /* ---- toolbar ---- */

  .tool-search {
    flex-wrap: wrap;
    gap: .45rem;
    padding: .55rem .6rem;
  }
  .tool-search input[type=search] { max-width: none; flex: 1 1 100%; }
  .tool-search .spacer, .tool-search div.spacer { display: none; }
  .as-char { flex: 1 1 100%; }
  .as-char select { min-width: 0; width: 100%; }
  .tool-search .f.inline { flex: 1 1 auto; }
  .tool-search .f.inline select { width: auto; }

  /* ---- filters ---- */

  .ah-filters {
    grid-template-columns: 1fr;
    padding: .6rem;
  }
  /* `span 2` in a one-column grid overflows the row rather than filling it. */
  .ah-filters .f.wide { grid-column: span 1; }

  /* ---- tables ---- */

  /* Every container that holds a table gets its own horizontal scroller. The
     page itself must never scroll sideways — that is the thing that makes a
     site feel broken on a phone — so the overflow is owned by the table box. */
  #items, #ah, #mail, #bags, .bag-group, .ah-wrap, .mkt-scroll, .own-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.ah { min-width: 40rem; }

  /* Pin the first column so a sideways swipe never loses the item name. It
     needs an opaque background of its own: without one the scrolled cells show
     straight through it. */
  table.ah td:first-child,
  table.ah th:first-child {
    position: sticky;
    left: 0;
    background: var(--panel);
    z-index: 2;
    max-width: 13rem;
  }
  table.ah th:first-child { z-index: 3; }        /* also sticky top; must win */
  /* The row hover tint is painted on the cell, so on the pinned column it would
     sit UNDER the sticky background and vanish. Restate it opaquely. */
  table.ah tr:hover td:first-child { background: #16202b; }
  table.ah td:first-child .iname { white-space: normal; }

  /* ---- dialogs ---- */

  .ah-dlg, .ah-dlg.wide {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }
  .ah-dlg .sell-form { grid-template-columns: 1fr; }
  .ah-dlg menu {
    position: sticky;
    bottom: 0;
    background: var(--panel);
    padding-top: .5rem;
  }
  .modal { width: 100vw; border-radius: 0; }

  /* ---- touch targets ---- */

  /* 32px is not the 44px Apple asks for, but these sit in dense table rows
     where 44 would double the row height. Big enough to hit, small enough that
     the table is still a table. */
  button, .btn, .ah-toggle,
  table.ah td.act .buy, table.ah td.act .bid {
    min-height: 32px;
  }
  table.ah td.act { white-space: normal; }
  table.ah td.act .buy, table.ah td.act .bid { margin: .1rem 0 .1rem .2rem; }

  /* Coin triplets and g/s/c inputs wrap badly in a narrow cell. */
  .gsc { display: flex; flex-wrap: wrap; gap: .2rem; }
  .gsc input { min-width: 3.5rem; }

  /* ---- toasts ---- */

  /* Bottom-right off a narrow screen puts half the message past the edge. */
  #toasts { left: .5rem; right: .5rem; bottom: .5rem; max-width: none; }

  /* ---- pager ---- */

  .pager, .ah-pager { padding: .8rem .6rem 1.6rem; }

  /* ---- warning banners ---- */

  .live-warn { margin: .5rem .6rem; font-size: .78rem; }
}

/* ------------------------------------------------------------------ touch */

/* A hover tooltip has no way to be dismissed on a touch screen: it opens on the
   emulated mouseenter and then stays until something else is tapped. The item
   name is already a button that opens the price-history dialog, which is the
   same information and can be closed, so on touch devices the hover card is
   suppressed entirely rather than left stuck to the screen. */
@media (hover: none) {
  .itemtip { display: none !important; }
}