*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; touch-action: pan-x pan-y; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  background: var(--bg);
  color: var(--text);
  /* +1px a propòsit: deixa el document sempre 1px scrollable. És el que fa
     possible el "cop de scroll" d'index.html (i el gest manual de l'usuari,
     si aquell falla), l'única cosa que fa que iOS recalculi el viewport quan
     el mesura massa curt en recarregar la PWA instal·lada. NO bloquejar mai
     l'overflow de l'arrel: sense aquest marge, la tabbar es queda desplaçada
     per sempre i l'usuari no té cap manera de recol·locar-la (regressió del
     28/08/2026). Visualment és 1px de fons, invisible. */
  min-height: calc(100vh + 1px);
  min-height: calc(100dvh + 1px);
  touch-action: pan-x pan-y;
}
.font-display { font-family: var(--font-display); font-optical-sizing: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Auto-linkified phone/URL/email inside plain-text notes (js/utils/linkify.js)
   — needs its own visible affordance since the global `a` rule above strips
   the default underline/color, which would otherwise make these invisible
   as tappable links inside a paragraph of plain text. */
.linkify-link {
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 600;
}
.linkify-link:active { opacity: 0.7; }