/* The site's own rules, and the kit every screen is built from: the type, the one button, the
 * one input, the focus ring, and the landing (src/pages/home.js). play.css
 * builds the play shell's screens from the same pieces. Every colour, size, radius and shadow
 * is a token from tokens.css.
 */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--size-1) / 1.5 var(--font);
  -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------------ type */

h1,
h2,
h3,
label {
  font-family: var(--font-display);
}

h1 {
  font-size: var(--size-4);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  overflow-wrap: anywhere;
}

h2 {
  font-weight: 600;
}

p {
  color: var(--ink-2);
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.note {
  color: var(--muted);
  font-size: var(--size-0);
}

.lede {
  font-size: var(--size-2);
  color: var(--ink-2);
  margin: 0 0 var(--space-3);
}

/* ------------------------------------------------------------------ the focus ring */
/* Every control shows where the keyboard is, in one ring that no fill can hide. */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* A screen's heading takes the focus when the screen appears (src/client/heading.js), so a
   screen reader says where you are. Nobody pressed it, so it shows no ring. */
h1[tabindex="-1"]:focus {
  outline: none;
}

/* ------------------------------------------------------------------ the page */

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
}

/* ------------------------------------------------------------------ the button */
/* One button: a chunky outline, a hard shadow, and a squish when it is pressed. Quiet is the
   same button on the raised surface. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  box-sizing: border-box;
  padding: var(--space-2) var(--space-4);
  border: var(--edge-1) solid var(--edge);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow);
  font-family: var(--font-display);
  font-size: var(--size-2);
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.button-quiet {
  background: var(--paper-2);
  color: var(--ink);
}

.button:active:not(:disabled) {
  transform: translateY(var(--press));
  box-shadow: var(--shadow-pressed);
}

.button:disabled {
  opacity: 0.55;
  cursor: default;
}

@media (hover: hover) {
  .button:hover:not(:disabled) {
    filter: brightness(1.06);
  }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

/* ------------------------------------------------------------------ the input */

.join label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--size-2);
  font-weight: 600;
}

.row {
  display: flex;
  gap: var(--space-2);
}

input {
  min-height: var(--tap);
  min-width: 0;
  flex: 1;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  border: var(--edge-1) solid var(--edge);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--size-2);
}

/* ------------------------------------------------------------------ the landing */
/* src/pages/home.js, and the play shell's own home (src/client/app.js): the name, the way in,
   joining with a code, and How to play in three lines. */

.landing {
  padding-top: var(--space-4);
}

.brand {
  margin: 0 0 var(--space-2);
}

.brand h1 {
  margin: 0;
  font-size: var(--size-5);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.actions-home > :first-child {
  min-height: 3.5rem;
  padding-inline: var(--space-5);
}

/* Joining with a code, set apart: a friend's code, typed big. */
.join {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--paper-3);
}

.join input {
  font-family: var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.how-title {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--size-3);
}

.how {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  counter-reset: how;
}

/* Each line numbered in the accent, so the three read as steps. */
.how li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink-2);
  counter-increment: how;
}

.how li::before {
  content: counter(how);
  flex: none;
  min-width: 1.2ch;
  text-align: center;
  color: var(--accent-text);
  font: 700 var(--size-3) / 1 var(--font-display);
}

.how strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
}

/* The landing on a phone held sideways: the ways in on the left, How to play on the right. */
@media (orientation: landscape) and (max-height: 32rem) {
  .landing {
    max-width: 60rem;
    padding: var(--space-3) var(--space-4);
    columns: 2;
    column-gap: var(--space-5);
  }

  .landing > .brand {
    column-span: all;
  }

  .landing > * {
    break-inside: avoid;
  }

  .landing > .how-title {
    break-before: column;
    margin-top: 0;
  }

  .landing .brand h1 {
    font-size: var(--size-4);
  }
}