/* Structure only: where things sit. Colour and type live in tokens.css and styles.css.
 *
 * One vertical line governs the mural: --marge is the left edge of the hour, the date, the
 * rule, the aggregate and the sync line. docs/07-diseno.md section 2.4: "an instrument has a
 * reading edge". Nothing is centred. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--acer);
  color: var(--tinta);
  font-family: var(--familia);
  -webkit-text-size-adjust: 100%;
}

/* Every screen of the mural: full height, no scrolling, EVER. PLAN.md 5.2 asks for zero
 * scroll and it is not a figure of speech -- one stray pixel gives a wall tablet a scrollbar
 * and a bounce under a finger that was aiming at a key.
 *
 * min-height: 100% would resolve against #app, whose height is auto, so it silently did
 * nothing and the page came out 1281 px tall in a 1280 viewport. dvh resolves against the
 * viewport and also survives the browser chrome of a phone. */
#app { min-height: 100dvh; }

.pantalla {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  padding: var(--marge);
  gap: 0;
  overflow: hidden;
}

.capcalera > * { margin: 0; }

/* The browser's default paragraph margin was the 1281st pixel: 1em top and bottom on the
 * prompt pushed the grid past the viewport. Every margin in this layout is stated.
 *
 * The slack collects ABOVE the prompt, not between the prompt and the keys: the prompt
 * explains the keypad, so it travels with it. What is left over is the calm the aggregate
 * needs, and section 4.5 of the design says that space is a decision, not a gap to fill. */
/* Everything in main hangs from the BOTTOM. That is what puts the keypad in the same place on
 * screen A and screen B, whatever their headers weigh: the slack collects above. */
.pantalla main {
  display: grid;
  grid-auto-rows: max-content;
  align-content: end;
  min-height: 0;
}
.invitacio { margin: 0 0 20px; }
.peu { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }

/* The keypad. Three columns, and the gutter is half of why it does not read as a table
 * (docs/07-diseno.md section 4.3). */
/* FIXED rows, anchored to the bottom, and this is not an aesthetic choice.
 *
 * The first digit is typed on screen A and the rest on screen B. If the rows shared the
 * leftover space, B's shorter header would make its keys taller and the whole keypad would
 * sit somewhere else: the finger that pressed 7 would find 1 in that spot. A keypad that
 * moves between two screens of the same gesture is a keypad you cannot learn.
 *
 * So the height is fixed and the slack collects ABOVE, which also keeps the screen inside
 * 1280 px when the header grows -- an earlier version shared the space and reached 1300. */
.teclat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, var(--tecla-alt));
  column-gap: var(--tecla-calle);
  row-gap: 0;
  align-content: end;
  min-height: 0;
}

.tecla {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  min-height: var(--tecla-alt);
  height: 100%;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  /* The rule goes under each key, not across the row: three short rules read as three keys,
   * one continuous rule reads as a table. */
  border-bottom: 1px solid var(--filet);
}

.tecla--buida { visibility: hidden; pointer-events: none; }