/* WPPBX(TM) base, v1. Load AFTER tokens.css and type.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);           /* explicit: a transparent body borrows the host ground */
  color:var(--ink);
  font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--pri);text-decoration:none}
a:hover{text-decoration:underline}
a:hover{color:var(--priHover)}
button{font:inherit;font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;text-align:left}
input,select,textarea{font:inherit;font-family:inherit;color:inherit}
/* The closed control is ours, so we draw it rather than the operating system.
   The list it opens is NOT ours and cannot be styled; color-scheme in
   tokens.css is what makes that list match the page. */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  /* Room for the chevron, which is drawn as a background image so it needs
     no extra element and no wrapper around every select in the product. */
  padding-right:2.1em;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 1.05em top 55%, right 0.75em top 55%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat}
/* A background-image chevron would sit on top of a background colour set
   elsewhere, so anything that sets one has to set the image again. */
select:disabled{opacity:.6}
select option{color:var(--ink);background:var(--surf)}
img,svg,video{max-width:100%;height:auto}

/* Keyboard focus must always be visible. */
:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:4px}

/* Every tappable thing clears the 44px minimum. */
.tap{min-height:var(--tap-min);min-width:var(--tap-min)}

/* Wide content scrolls inside itself; the page body never scrolls sideways. */
.scroll-x{overflow-x:auto;max-width:100%}

/* The theme control. One appearance everywhere it is mounted, because it is
   the same control doing the same job on every surface in the product. */
.themebtn{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);
  background:var(--surf2);border:1px solid var(--line);
  border-radius:var(--r-chip);padding:4px 9px;cursor:pointer;
  min-height:22px;line-height:1}
.themebtn:hover{color:var(--ink);border-color:var(--ink3)}
.themebtn:focus-visible{outline:2px solid var(--pri);outline-offset:1px}

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