/* tapis-vert — base (spec §4): the reset, the woven cloth, type and buttons. Plan 2 adds
   sheets and forms here. No rule in this file positions anything on the mat. */

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

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

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--tapis);
  /* the tapis: woven, faintly, by two crossed gradients at 3% — no image, no bytes, no banding */
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .03) 0 1px, transparent 1px 3px);
  color: var(--craie);
  font: 16px/1.4 var(--font-ui);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p { margin: 0; }

button { font: inherit; color: inherit; }

/* every target outside the hand is at least 44 px (constraint 10) */
.btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--carton);
  color: var(--encre);
  font: 600 16px/1 var(--font-ui);
  cursor: pointer;
  touch-action: manipulation;
}

.btn--quiet {
  background: transparent;
  color: var(--craie);
  font: 700 16px/1 var(--font-index);
  font-variant-numeric: tabular-nums;
}

/* three lines, drawn in code; the button's text is its accessible name */
.btn--icon { width: 44px; padding: 0; font-size: 0; color: var(--craie); background: transparent; }
.btn--icon::before {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.btn:focus-visible { outline: 3px solid var(--dorure); outline-offset: 2px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .25);
  font-size: 13px;
  white-space: nowrap;
}

.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--craie); }
.pill[data-state="reconnecting"]::before { background: var(--filet); }
.pill[data-state="offline"]::before { background: var(--vermillon); }

/* --motion scales every duration: 0 under prefers-reduced-motion and under the setting that
   forces it (constraint 12), so a pulse stops and a slide becomes a cut with its text label */
:root { --motion: 1; }
@media (prefers-reduced-motion: reduce) { :root { --motion: 0; } }
:root[data-motion="reduced"] { --motion: 0; }