/* The page's foundation: reset, type, and the centred column. Components are in components.css, values in tokens.css.
   Logical properties only (inline = along the line, block = across lines), so the page mirrors itself in Arabic. */

/* One family for the whole page, hosted in web/fonts/ (the page asks no other site for anything): IBM Plex Sans Arabic
   for Arabic and IBM Plex Sans for Latin letters and digits (both SIL Open Font License 1.1, copyright IBM Corp.,
   https://openfontlicense.org; from Google Fonts, woff2). The Arabic files are the Arabic-script part of the three weights
   the page uses (version 15); the Latin file is the Latin part of the variable font, one file for every weight (version
   23). A browser fetches a file only when text on screen needs it. font-display: swap shows the text at once in the
   machine's font and swaps when the file has arrived. The server caches everything in web/fonts/ for a year (api/main.py):
   give a changed file a new name. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
  size-adjust: 108%;                  /* Arabic letters run small beside Plex Sans digits at the same size: drawn 8% larger */
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
  size-adjust: 108%;                  /* Arabic letters run small beside Plex Sans digits at the same size: drawn 8% larger */
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-700.woff2") format("woff2");
  size-adjust: 108%;                  /* Arabic letters run small beside Plex Sans digits at the same size: drawn 8% larger */
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-end: 7rem;     /* a control that scrolls into view stays clear of the bar pinned to the bottom of a phone screen */
}

/* "Mix my own" on a phone: the live sheet at the bottom is taller (a line per water and two rows of minerals) */
@media (max-width: 63.99rem) {
  html:has(.tabpanel:not([hidden]) .mix-sheet:not([hidden])) {
    scroll-padding-block-end: 17rem;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-variant-numeric: tabular-nums;     /* every number lines up: the boxes, the pour amounts, the table, the mixer */
  line-height: var(--leading-normal);
}

/* only the h1 is 700; headings, picked and selected things, buttons and key numbers are 600; the rest is 400 (and 500 for what
   is typed in a box). One family, no letter-spacing (it would break the joined Arabic letters). */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
}

strong,
b {
  font-weight: 600;
}

h2,
h3 {
  font-size: var(--text-lg);
}

h4 {
  font-size: var(--text-base);
}

p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

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

/* the running text's line height follows the page's language (the tokens hold both values) */
:root:lang(ar) {
  --leading-normal: var(--leading-arabic);
}

:root:lang(en) {
  --leading-normal: var(--leading-latin);
}

[hidden] {
  display: none !important;
}

.page {
  max-inline-size: var(--page-max);
  margin-inline: auto;
  padding-block: var(--space-4) var(--space-5);
  padding-inline: var(--page-gutter);
  overflow-wrap: anywhere;            /* a long name with no spaces wraps instead of pushing the page sideways */
}

@media (min-width: 64rem) {
  .page {
    max-inline-size: var(--page-max-wide);
    padding-inline: var(--space-6);
  }

  h1 {
    font-size: var(--text-3xl);
  }
}

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