*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:var(--font-display);
  color:var(--ocean-deep);
  margin:0;
  font-weight:600;
}
button,input,select,textarea{font-family:inherit; font-size:15px;}
a{color:inherit;}
img,svg{max-width:100%;}

:focus-visible{
  outline:var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset:2px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--ocean-deep);
  color:var(--sand);
  padding:10px 16px;
  font-size:14px;
  border-radius:0 0 2px 0;
}
.skip-link:focus{left:0;}

/* El atributo hidden siempre gana sobre cualquier display de una clase
   (.field, .chip-set, .cond-block, etc.); sin esta regla, un elemento con
   hidden y una clase con display:flex seguiria visible. */
[hidden]{display:none !important;}

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}