/* account.css - the Account screen: identity, the record, referrals.
 *
 * Split out of locker.css, where the `.acc-*` rules had been living because
 * app.css was full when they were written. They are a different screen and this
 * file is where they belong; locker.css got 17 lines back in the move.
 *
 * The screen is PAGED now (public/js/account-stats.js). It never was, and it had
 * never been measured with a real record in it either, because the gate's fixture
 * stocks the Shop, the Locker and the Mailbox and stops there. Filled in, it lost
 * the bottom of itself at almost every size: 62px on a 1280x800 laptop, 540px at
 * 320x568, around a thousand in landscape.
 *
 * Loaded after locker.css and before ui.css/fit.css, which still hold the
 * signed-out block's small-screen rules.
 */

/* ---- The record ----
   Its own block now rather than the tail of the identity card. One 470px card
   holding identity, stats AND sign-out is a single unit the pager cannot split,
   and on a phone no page can hold it: it was drawn to the bottom edge and cut. */
/* #accStats is the box the socket handler writes into; the blocks are lifted out
   of it and in beside the cards (hoistBlocks), so it is empty and hidden by then. */
.acc-stats[hidden] { display: none; }

/* One heading and the grid it names, in one card. These are the pager's page
   units: a break between a heading and its grid would put "Per match" over a page
   of lifetime totals. Each reads as a card like the ones around it, rather than as
   three sections sharing one frame. */
.acc-block {
  width: 100%;
  border: 1px solid rgba(255,255,255,.10); border-radius: 12px;
  background: rgba(255,255,255,.03); padding: 10px 12px;
}
.acc-stat-head {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  opacity: .55; margin: 0 0 6px;
}
.acc-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.acc-stat {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
/* Every tile the same height, whatever its label does. "Last online" wraps to two
   lines while "Member no." does not, and a grid row sized by its tallest cell left
   the short ones with their values floating in the middle of a taller box. The
   value sits on the floor of the tile now, so the numbers line up across a row
   even when the labels above them do not. */
.acc-stat span { font-size: .68rem; opacity: .6; text-transform: uppercase; letter-spacing: .04em; }
.acc-stat b { font-variant-numeric: tabular-nums; font-size: .95rem; line-height: 1.15; }
.acc-stat-empty { opacity: .65; font-size: .85rem; padding: 10px 2px; }

/* Sign out is its own block for the same reason the stats are: it is the control
   that ends the session, and it was the first thing to fall off the bottom. */
.acc-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* Short screens: the tiles keep their 3-across shape but stop spending height on
   padding they do not need. Measured at 320x568, this is what takes the stats
   block from three pages to two. */
@media (max-width: 620px), (max-height: 700px) {
  .acc-block { padding: 8px 9px; }
  .acc-stat { padding: 6px 8px; }
  .acc-stat span { font-size: .63rem; }
  .acc-stat b { font-size: .9rem; }
  .acc-stat-head { margin-bottom: 4px; }
}

/* The two halves of the screen. Their layout used to be an inline style on each
   element, which is why fit.css had to say `display: grid !important` to lay the
   sign-in form out in landscape — and that !important then outranked the line that
   HIDES this block when somebody is signed in. Owned here, both halves answer to
   the `hidden` attribute like everything else in the shell. */
#accountInfo, #accountSignedOut {
  display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%;
}