/*
 * The page frame: 1068px page, top bar, banner, three columns, footer.
 * Positions are the ones measured in design/replica (1280px window): top bar y=4, banner image
 * y=68.5, menu y=347, columns from y=398 at x=106 / 368.5 / 982 (gaps 3.5px), footer text at 1575.
 */

#page {
  position: relative;
  min-height: 100%;
  max-width: 1060px;
  min-width: 954px;
  margin: 0 auto;
}

#page-wrap {
  margin-right: -4px;
  margin-left: -4px;
  font-size: 14px;
  font-family: Arial;
  color: #d1cab3;
  background-color: transparent;
}

#site-body {
  position: relative;
  z-index: 1;
}

/*
 * The footer sits at the bottom of the window when a page is shorter than the window (David,
 * DECISIONS 140): #page is at least the window's height (html and body are 100%), #page-wrap fills
 * it, and the page's body takes the room that's left. Percentages, not viewport units: every
 * browser draws them the same under scale.js's zoom. A taller page is as before, the footer right
 * after the columns (flex items keep their own margins, and #site-body ends with the columns'
 * grid, which has none).
 */
#page {
  display: flex;
  flex-direction: column;
}

#page-wrap {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

#site-body {
  flex: 1 0 auto;
}

.site-header {
  height: 398px;
}

/* Top bar. Laid out at 0-21px and drawn 4px lower; the dividers take space but are invisible. */
#enjin-bar {
  position: relative;
  top: 4px;
  padding: 5px 1px;
  font-size: 11px;
}

#enjin-bar .right {
  float: right;
  font-size: 13px;
}

#enjin-bar .divider {
  margin: 0 7px;
  visibility: hidden;
  color: transparent;
}

#enjin-bar a {
  color: #e9bd7f;
}

/* Banner: a 313px block from y=28 with the image centred at y=68.5 (Enjin's paragraph spacing). */
.banner {
  box-sizing: border-box;
  height: 313px;
  margin-top: 7px;
  padding-top: 40.5px;
}

.banner img {
  display: block;
  margin: 0 auto;
}

.site-header .m_hmenu {
  margin-top: 6px;
}

/*
 * Columns: 259 | 610 | 192 with 3.5px gaps. Each column stacks its modules 7px apart; the first
 * module starts 4px above the column and the last one overhangs it by 7px, as in Enjin.
 */
.columns {
  display: grid;
  grid-template-columns: 259px 610px 192px;
  column-gap: 3.5px;
  align-items: start;
}

.columns-full {
  grid-template-columns: 1068px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: -4px 0 -7px;
}

/* Footer: an 80px band starting 9px above the end of the columns; its text sits 50/56px down. */
#page-footer {
  position: relative;
  height: 80px;
  margin-top: -9px;
  font-size: 11px;
  background-color: transparent;
}

#page-footer .left {
  position: absolute;
  top: 56px;
  left: 0;
  width: 100%;
  margin-top: -6px;
  padding-left: 0;
}

#page-footer .right {
  position: absolute;
  top: 56px;
  right: 0;
  color: #fff;
}

#page-footer .left img {
  position: relative;
  top: 4px;
}

/* Without the 2018 Enjin logo, the left text keeps the line the 16px logo gave it. */
#page-footer .left.text-only {
  padding-top: 7px;
}

#page-footer a {
  text-decoration: underline;
}

/* The homepage's phone column and the phone footer line (DECISIONS 85) only show below 768px. */
.home-phone,
.phone-footer-extra {
  display: none;
}

/* The phone header and its account sheet (src/views/partials/phone-header.njk; DECISIONS 85)
   only show below 768px. */
.phone-header,
.account-sheet {
  display: none;
}

/*
 * Phones (below 768px; DECISIONS 84): one column, full width with a 6px margin, in the same
 * textures. The banner scales to the width (its lettering is part of the image), the phone
 * header takes the top bar's place (DECISIONS 85), and the columns stack left, centre, right
 * (David, 2026-10-11).
 */
@media (max-width: 767.98px) {
  #page {
    min-width: 0;
    max-width: none;
    margin: 0 6px;
  }

  #page-wrap {
    margin-right: 0;
    margin-left: 0;
  }

  .site-header {
    height: auto;
  }

  /*
   * The phone header (DECISIONS 85) replaces the Enjin top bar: the site name on the left; Log in
   * and Join (.phone-btn, in menu.css), or the member's avatar in the theme's square frame with a
   * green badge counting their unread threads, on the right. 52px tall, on the page texture.
   */
  #enjin-bar {
    display: none;
  }

  .phone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 52px;
    padding: 0 3px 0 6px;
  }

  .phone-header-title {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 16px;
    font-weight: bold;
    color: #e9bd7f;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }

  .phone-header-title:hover,
  .phone-header-title:focus {
    color: #fff;
    text-decoration: none;
  }

  .phone-header-actions {
    display: flex;
    gap: 8px;
    margin-right: 3px;
  }

  .phone-header-avatar {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  .phone-header-avatar:hover,
  .phone-header-avatar:focus {
    text-decoration: none;
  }

  .phone-header-avatar:hover .phone-avatar {
    border-color: #e9bd7f;
  }

  .phone-header-avatar:focus-visible {
    outline-offset: -1px;
  }

  /* The avatar frame is .element_avatar.simple (1px #47423c border, 1px black padding); these
     size what's inside it: the uploaded avatar, or the member's initials on the frame's black. */
  .phone-avatar img,
  .phone-avatar-initials {
    width: 34px;
    height: 34px;
  }

  .phone-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    color: #fff8c9;
  }

  .phone-avatar-48 img,
  .phone-avatar-48 .phone-avatar-initials {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .phone-badge {
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background-color: #8bed80;
    font-size: 11px;
    font-weight: bold;
    line-height: 18px;
    color: #0b0a08;
    text-align: center;
  }

  /*
   * The account sheet: a modal <dialog> along the bottom of the screen (public/js/phone-nav.js
   * opens it from the avatar). Square, #121210 with a #4d4845 top edge, over a dimmed page.
   */
  .account-sheet[open] {
    display: block;
  }

  .account-sheet {
    position: fixed;
    inset: auto 0 0;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    max-height: calc(100% - 52px);
    margin: 0;
    padding: 6px 0 20px;
    overflow-y: auto;
    border: 0;
    border-top: 1px solid #4d4845;
    background-color: #121210;
    font-family: Arial;
    font-size: 14px;
    color: #d1cab3;
  }

  .account-sheet::backdrop {
    background-color: rgba(0, 0, 0, 0.62);
  }

  /* The page behind the open sheet stays put. */
  html:has(.account-sheet[open]) {
    overflow: hidden;
  }

  .account-sheet-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 14px;
    border-bottom: 1px solid #363224;
    -webkit-tap-highlight-color: transparent;
  }

  .account-sheet-who {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .account-sheet-name {
    font-size: 18px;
    font-weight: bold;
    color: #e9bd7f;
    overflow-wrap: anywhere;
  }

  .account-sheet-profile:hover,
  .account-sheet-profile:focus {
    text-decoration: none;
  }

  .account-sheet-profile:hover .account-sheet-name {
    color: #fff;
  }

  .account-sheet-profile:hover .phone-avatar {
    border-color: #e9bd7f;
  }

  .account-sheet-meta {
    font-size: 13px;
    color: #858176;
  }

  .account-sheet-rows {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .account-sheet-logout {
    margin: 0;
  }

  .account-sheet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-bottom: 1px solid #363224;
    border-radius: 0;
    background: none;
    font-family: Arial;
    font-size: 16px;
    color: #e7f5b8;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .account-sheet-row:hover,
  .account-sheet-row:focus {
    color: #fff;
    text-decoration: none;
  }

  /* Log out is the last row: muted, as in the mockup, and without a rule under it. */
  .account-sheet-logout .account-sheet-row {
    border-bottom: 0;
    color: #858176;
  }

  .account-sheet-logout .account-sheet-row:hover,
  .account-sheet-logout .account-sheet-row:focus {
    color: #fff;
  }

  /* Opened by a tap, the sheet itself takes focus (public/js/phone-nav.js), not its first row. */
  .account-sheet:focus {
    outline: none;
  }

  .account-sheet-row:focus-visible,
  .account-sheet-profile:focus-visible {
    outline-offset: -3px;
  }

  /* For screen readers and keyboards (a tap outside the sheet closes it too); shown on focus. */
  .account-sheet-close {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    background: none;
    font-family: Arial;
    font-size: 16px;
    color: #e7f5b8;
    white-space: nowrap;
  }

  .account-sheet-close:focus-visible {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    min-height: 52px;
    clip-path: none;
    border-top: 1px solid #363224;
    outline-offset: -3px;
  }

  .banner {
    height: auto;
    margin-top: 0;
    padding: 0 0 6px;
  }

  .banner img {
    width: 100%;
    max-width: 1040px;
    height: auto;
  }

  .columns,
  .columns-full {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    margin-top: 7px;
  }

  .column {
    min-width: 0;
    margin: 0;
  }

  /* The homepage: the layout's phone column in place of the three desktop columns (DECISIONS 85). */
  .home-columns {
    display: none;
  }

  .home-phone {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 7px;
  }

  /* The homepage's footer line (the hit counter) gets a row of its own under the frame's row, so
     the footer reads the same on every page. */
  .phone-footer-extra {
    display: block;
    flex-basis: 100%;
  }

  #page-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    height: auto;
    margin-top: 0;
    padding: 16px 2px 20px;
    font-size: 12px;
  }

  #page-footer .left,
  #page-footer .right {
    position: static;
    width: auto;
    margin-top: 0;
  }

  #page-footer .left.text-only {
    padding-top: 0;
  }
}