/*
 * Privacy Policy / Terms of Service pages (privacy.php, tos.php): the text
 * styling only. The windows, buttons, background and tokens are shared with the
 * login page in css/lyr-ui.css, which these pages load first.
 *
 * Standalone from main.css on purpose: that sizes the game hub at a fixed 970px
 * and does not fit narrow screens.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--lyr-text);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  text-align: left;
  /* Keep content clear of notches / rounded phone corners. */
  padding: var(--lyr-page-gutter) max(var(--lyr-page-gutter), env(safe-area-inset-right)) max(var(--lyr-page-gutter), env(safe-area-inset-bottom)) max(var(--lyr-page-gutter), env(safe-area-inset-left));
}

/* Same column as the login page's .container. */
.legal-wrap {
  width: 100%;
  max-width: var(--lyr-page-width);
  margin: 0 auto;
}

h1 {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1.2;
  text-transform: uppercase;
}

/* A readable line length: the plate spans the page, the prose does not. */
.legal-scroll > p,
.legal-scroll > ul,
.legal-scroll > h2 {
  max-width: 78ch;
}

.legal-updated {
  margin: 4px 0 0;
  color: var(--lyr-muted);
  font-size: 0.9rem;
}

h2 {
  margin: 1.8em 0 0.5em;
  padding-bottom: 0.3em;
  /* a brass rule that fades out, in place of a plain line */
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, var(--lyr-accent), rgba(212, 162, 76, 0)) 1;
  font-size: clamp(1.05rem, 3.2vw, 1.25rem);
  line-height: 1.3;
  text-transform: uppercase;
}

.legal-scroll > h2:first-child {
  margin-top: 0;
}

p {
  margin: 0 0 1em;
}

ul {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

li {
  margin-bottom: 0.4em;
}

a {
  color: var(--lyr-link);
  text-decoration: underline;
}

a:hover,
a:focus-visible {
  color: var(--lyr-link-hover);
}

a:focus-visible {
  outline: 2px solid var(--lyr-accent-hi);
  outline-offset: 2px;
}

/* The buttons keep their own look in every state (see .lyr-btn in lyr-ui.css). */
a.lyr-btn,
a.lyr-btn:hover,
a.lyr-btn:visited {
  text-decoration: none;
}

/* Long unbroken strings (email addresses, URLs) must never force a sideways scroll. */
p,
li,
td,
th,
h1,
h2 {
  overflow-wrap: anywhere;
}

/* The buttons row has no bullets or list spacing. */
.lyr-topnav li {
  margin-bottom: 0;
}

/* ---- Data table (privacy policy) ----------------------------------- */

.legal-table {
  width: 100%;
  margin: 0 0 1em;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.legal-table th,
.legal-table td {
  padding: 8px 10px;
  border: 1px solid var(--lyr-line-soft);
  vertical-align: top;
  text-align: left;
}

.legal-table th {
  background-color: var(--lyr-panel-alt);
}

/* Phones: each row becomes its own small window, with the column name above each value. */
@media (max-width: 640px) {
  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table td {
    display: block;
    width: 100%;
  }

  .legal-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .legal-table tr {
    margin-bottom: 10px;
    background-color: var(--lyr-panel-alt);
    border: 1px solid var(--lyr-line-soft);
    border-radius: 2px;
    overflow: hidden;
  }

  .legal-table td {
    border: 0;
    border-bottom: 1px solid var(--lyr-line-soft);
  }

  .legal-table td:last-child {
    border-bottom: 0;
  }

  .legal-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--lyr-muted);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 0.95rem;
  }
}

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .lyr-window {
    background: #fff;
    border-color: #000;
    color: #000;
  }

  a {
    color: #000;
  }

  .lyr-topnav {
    display: none;
  }
}

/* ---- Fit the screen: on a desktop-sized window the page is exactly one screen tall and the text
 * scrolls inside its own window, so the login, privacy and terms pages occupy the same frame. ---- */
@media (min-width: 760px) and (min-height: 560px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  body {
    height: 100vh;
    height: 100dvh;
  }

  .legal-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .legal-wrap > .lyr-window {
    flex: 0 0 auto;
    margin-bottom: var(--lyr-window-gap);
  }

  .legal-wrap > .legal-panel {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }

  /* The text scrolls in this inner box, not in the window itself: the window's corner strokes and brackets are
   * drawn on the window, and on a scrolling element they would scroll away with the text. The scrollbar sits
   * against the window's right edge. */
  .legal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-right: calc(-1 * clamp(16px, 3vw, 28px));
    padding-right: clamp(16px, 3vw, 28px);
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--lyr-accent) transparent;
  }
}

/* Header and text are different element types, so "last-of-type" in lyr-ui.css would strip the header's gap;
 * keep the buffer between the two windows. */
.legal-wrap > header.lyr-window {
  margin-bottom: var(--lyr-window-gap);
}

/* Title row: the heading on the left, the date on the right, the same height as the login page's logo row,
 * so the header window is the same size on all three pages. */
.legal-wrap > header.lyr-window {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
}

.legal-wrap > header.lyr-window > .lyr-topnav {
  flex: 0 0 100%;
}

.legal-wrap > header.lyr-window > h1 {
  min-height: 50px;
  display: flex;
  align-items: center;
  font-size: clamp(1.3rem, 4.2vw, 1.7rem);
}

.legal-wrap > header.lyr-window > .legal-updated {
  margin: 0;
  text-align: right;
}