/* Roboto — self-hosted SCRAMBLED variable font + a plain copy for form fields.
 *
 * Two families are declared from the same Roboto source:
 *
 *   'Roboto'        — the SCRAMBLED woff2 (glyphs Caesar-shifted +1).
 *                    Used for all normal UI text; the DOM text is shifted +1
 *                    by scripts/font-scramble.js so it renders normally.
 *
 *   'Roboto Plain'  — the un-scrambled (original) woff2.  Used ONLY by form
 *                    controls (input / textarea), whose .value must stay
 *                    literal for form submission and JS logic to work.
 *                    Because the field renders through the normal font, its
 *                    literal value — and its placeholder — show up correctly
 *                    with no shifting.  (font-scramble.js therefore does NOT
 *                    shift placeholders.)
 *
 * Material Symbols Outlined (loaded separately from Google) is NOT scrambled
 * and its icon ligature text must stay literal — font-scramble.js skips it.
 */

/* ---- scrambled Roboto (UI text) ---- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('Roboto-latin-ext-scrambled.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('Roboto-latin-scrambled.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;
}

/* ---- plain (un-scrambled) Roboto for form fields ---- */
@font-face {
  font-family: 'Roboto Plain';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('Roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto Plain';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('Roboto-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;
}

/* Form controls (input / textarea / select) render through the
 * UNSCRAMBLED 'Roboto Plain' font, so their literal .value, placeholder and
 * option text all show up correctly with NO shifting — font-scramble.js
 * skips them entirely.  (Buttons stay on the scrambled 'Roboto' — their
 * visible text is shifted by font-scramble.js and renders normally.)  The
 * code editor #editor-text keeps its monospace stack via a higher-
 * specificity ID rule that beats this element rule. */
input, textarea, select {
  font-family: 'Roboto Plain', 'Roboto', sans-serif;
}

/* Make sure every code / pre block renders in an UNSCRAMBLED monospace
 * stack (these fonts are not scrambled, so their text must NOT be
 * shifted). Specific class/id rules that already set monospace win on
 * specificity; this just backstops any bare <pre>/<code>. */
pre, code, kbd, samp, tt {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}