/* Type, colour and the one motion the product has. */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans-subset.woff2') format('woff2-variations'),
       url('../fonts/IBMPlexSans-subset.woff2') format('woff2');
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

body { font-variant-numeric: tabular-nums; }

.hora {
  font-size: var(--mida-192);
  font-weight: var(--hora-pes);
  font-stretch: 85%;
  line-height: .9;
  letter-spacing: -.01em;
}

.segons { font-size: var(--mida-48); font-weight: 400; color: var(--tinta-suau); }
.data { font-size: var(--mida-24); color: var(--tinta-suau); }
.agregat { font-size: var(--mida-36); }
.invitacio { font-size: var(--mida-24); color: var(--tinta-suau); }
.estat { font-size: var(--mida-16); color: var(--tinta-suau); }

.tecla { font-size: var(--mida-72); font-weight: 400; }

/* The key inverts whole. Not a subtle highlight: the same language the plates speak.
 * docs/07-diseno.md section 4.3. */
.tecla:active,
.tecla[data-premuda] {
  background: var(--premut-fons);
  color: var(--premut-tinta);
  transition: none;
}
/* LA ÚNICA EXCEPCIÓN A "solo opacity y transform", y se declara para que pueda dejar de
 * serlo. La tecla INVIERTE entera -- fondo y tinta intercambiados -- y no hay forma de
 * invertir un bloque con una transformación: la haría el compositor si fuera un
 * desplazamiento o una escala, y esto no lo es. Es un repintado de 200x152 px, y lo que
 * decide si se queda no es este comentario: es tools/mesura-moviment.html sobre la tablet
 * real. Ver docs/07-diseno.md 8.5. */
.tecla { transition: background var(--durada-toc) linear, color var(--durada-toc) linear; }

.tecla:focus-visible { outline: 3px solid var(--tinta); outline-offset: -6px; }

/* The delete key is drawn, not typed: U+232B is not in IBM Plex Sans, and falling back to the
 * system font for one glyph would break the single-family thesis on the key most hands touch.
 * See app/fonts/README.md. */
.esborra svg { width: .78em; height: .78em; display: block; }
/* Stroke matched to the stem of a digit beside it: lighter and the key looks disabled,
 * heavier and the cross closes up into a blob. Measured against the 7 at 72 px. */
.esborra svg path { fill: none; stroke: currentColor; stroke-width: 5.5; stroke-linejoin: round; }

.idioma {
  appearance: none; border: 0; background: none; color: var(--tinta-suau);
  font: inherit; font-size: var(--mida-16); padding: 12px 0 12px 24px; cursor: pointer;
  min-height: var(--touch); text-decoration: underline; text-underline-offset: 4px;
}
.idioma:focus-visible { outline: 2px solid var(--tinta); }

/* A state that needs somebody to do something raises its weight and takes the rule underneath.
 * Still no colour: the palette has two and they belong to entering and leaving. */
.estat--crida {
  color: var(--tinta);
  font-weight: 550;
  border-bottom: 1px solid var(--filet);
  padding-bottom: 6px;
}

/* `hidden` has to win over a display that a class sets.
   Found by rendering, not by reading: the reason dialog's free text box is a `.camp`,
   `.camp` is `display: grid`, and grid beats the attribute's own `display: none`. The
   box that must only appear under "another reason" was on screen from the start --
   which is the exact failure 6.5 describes: a permanent empty box is a box people skip.
   It is a one-line rule and it belongs here, above every component, because any class
   with a display can do the same thing again. */
[hidden] { display: none !important; }