/* The phone, and the desk. Same code, same tokens, same family: what changes is what comes
 * first (PLAN.md 5.2). The mural is an appliance and these are not, so they scroll, they have a
 * heading, and they are read sitting down.
 *
 * Nothing here introduces a colour. The green plate is the punch button and it is the same
 * green as the mural's, because it means the same thing. */

/* THE SCALE IS NOT THE MURAL'S, and that is not a compromise: the mural is read from a metre
 * away and a phone from thirty centimetres. Rendering it first with the wall sizes made the
 * heading wrap onto two lines and pushed three people off a 390 px screen. Same family, same
 * tokens, different rung of the same Bringhurst scale. */
.pantalla--mobil { grid-template-rows: auto 1fr auto; padding: 24px; }
.capcalera--mobil { display: grid; gap: 2px; }
.titol { font-size: var(--mida-24); margin: 0; font-weight: 550; order: -1; }
.pantalla--mobil .agregat { font-size: var(--mida-16); color: var(--tinta-suau); }

/* HOW TO OVERRIDE `.pantalla main`, written once because it has caught me three times.
 *
 * layout.css says `.pantalla main { align-content: end; }` -- (0,1,1) -- and that is what keeps
 * the keypad in the same place on screens A and B, which is a property with its own test. Any
 * rule that wants to differ MUST match that specificity or it loses silently: a bare `.llista`
 * is (0,1,0) and does nothing. It cost a stretched plate, a bottom-anchored list and a
 * two-column layout with no gutter before the pattern was obvious.
 *
 * So the form is always `.pantalla--x main.y`. Never weaken the rule in layout.css: the mural
 * depends on it. */
.pantalla--mobil main.llista {
  display: grid;
  align-content: start;
  gap: 0;
  margin: 20px 0;
  min-height: 0;
  overflow-y: auto;
}

.persona {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'nom temps' 'des temps';
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--filet);
}
.persona { padding: 14px 0; }
.persona__nom { grid-area: nom; font-size: var(--mida-21); }
.persona__des { grid-area: des; font-size: var(--mida-14); color: var(--tinta-suau); }
.persona__temps { grid-area: temps; font-size: var(--mida-21); font-variant-numeric: tabular-nums; }

.buit { font-size: var(--mida-18); color: var(--tinta-suau); margin: 0; }

/* `.peu` in layout.css is a flex row with space-between. As a grid, that same
 * justify-content packs the columns to their content and the punch button came out the width of
 * its label. Reset here rather than weakened there: the mural's footer wants space-between. */
.peu--mobil { display: grid; gap: 12px; justify-content: stretch; justify-items: stretch; }
.peu--mobil .placa { min-height: var(--touch); font-size: var(--mida-24); }
.peu--mobil .secundari { justify-self: center; }

/* The desk earns its width instead of stretching a phone across it: the list becomes two
 * columns and the type steps up. PLAN.md 5.2 says the computer should use the width. */
@media (min-width: 900px) {
  /* The desk is content-led. The mural's footer is pinned to the bottom because the mural is a
   * fixed board; a page is not, and two links stranded at the foot of 1440 px of nothing read as
   * leftovers rather than as the actions they are. Everything sits under the heading, and the
   * width is capped so a line stays a line. */
  .pantalla--mobil {
    padding: 64px 80px;
    grid-template-rows: auto auto auto;
    align-content: start;
    max-width: 1120px;
  }
  .pantalla--mobil .peu--mobil { margin-top: 40px; }
  .titol { font-size: var(--mida-36); }
  .persona__nom, .persona__temps { font-size: var(--mida-24); }

  /* Two columns, and a measure. A name and its clock spread across 640 px is not a row, it is
   * two things at opposite ends of a field: the eye has to travel to pair them. Capped so the
   * desk gains COLUMNS from its width rather than stretch. */
  .pantalla--mobil main.llista {
    grid-template-columns: repeat(2, minmax(0, 30rem));
    column-gap: 80px;
    justify-content: start;
  }

  /* Few people: one column, and the type goes up rather than the layout going wide. */
  .pantalla--mobil main.llista--poca { grid-template-columns: minmax(0, 34rem); }
  .llista--poca .persona { padding: 20px 0; }
  .llista--poca .persona__nom, .llista--poca .persona__temps { font-size: var(--mida-36); }
  .llista--poca .persona__des { font-size: var(--mida-16); }
  .peu--mobil { grid-template-columns: auto auto; justify-content: start; gap: 32px;
                align-items: center; }
  .peu--mobil .placa { padding: 0 48px; }
}

/* "Les meves hores": one row per day, the pairs underneath, the total at the right. Same rule
 * per row as the keypad's keys, same reason -- it belongs to the day, not to the table. */
.dia {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'data total' 'hores hores';
  gap: 2px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--filet);
}
.dia__data { grid-area: data; font-size: var(--mida-18); }
.dia__total { grid-area: total; font-size: var(--mida-18); font-variant-numeric: tabular-nums; }
.dia__hores { grid-area: hores; font-size: var(--mida-14); color: var(--tinta-suau);
              font-variant-numeric: tabular-nums; }

/* The monthly offer. A card at the top of your own month, and the only card in the product:
 * it is the one thing here that is a proposal rather than a record. */
.oferta {
  display: grid; gap: 12px; justify-items: start;
  padding: 20px; margin-bottom: 20px;
  border: 2px solid var(--filet); border-radius: var(--radi);
}
.oferta__titol { font-size: var(--mida-24); margin: 0; }
.oferta__cos { font-size: var(--mida-16); color: var(--tinta-suau); margin: 0; }
.oferta .resposta { min-height: var(--touch); font-size: var(--mida-21); padding: 0 28px; }