/*
 * The gothic faces: M PLUS 1p (the default) and Noto Sans JP. /fonts/font-pick.js puts the choice on <html data-font>
 * ("pixel", "mplus" or "noto"); the rules below apply only to the two gothic ones, so the pixel faces stay as pixel.css
 * draws them. A face file is fetched only when the page draws with it.
 * They replace the pixel faces in every stylesheet that reads --ui / --ui-sm, with smooth text instead of bitmap text.
 * Hangul comes from Galmuri11 through the stack, and kanji outside the subset from the system face.
 */

@font-face {
  font-family: "M PLUS 1p";
  src: url("./MPLUS1p-400.v1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "M PLUS 1p";
  src: url("./MPLUS1p-700.v1.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("./NotoSansJP-400.v1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("./NotoSansJP-700.v1.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root[data-font="mplus"] {
  --ui: "M PLUS 1p", "Galmuri11", "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
}

:root[data-font="noto"] {
  --ui: "Noto Sans JP", "Galmuri11", "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
}

:root:is([data-font="mplus"], [data-font="noto"]) {
  --ui-sm: var(--ui);
  --fs-sm: 12px;
  --lh-sm: 14px;
  font-kerning: normal;
  font-synthesis: weight;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: auto;
}

:root:is([data-font="mplus"], [data-font="noto"]) button,
:root:is([data-font="mplus"], [data-font="noto"]) input,
:root:is([data-font="mplus"], [data-font="noto"]) textarea,
:root:is([data-font="mplus"], [data-font="noto"]) select,
:root:is([data-font="mplus"], [data-font="noto"]) code,
:root:is([data-font="mplus"], [data-font="noto"]) kbd,
:root:is([data-font="mplus"], [data-font="noto"]) pre {
  font-kerning: normal;
}

:root:is([data-font="mplus"], [data-font="noto"]) #moon-coords,
:root:is([data-font="mplus"], [data-font="noto"]) #scope-zoom button,
:root:is([data-font="mplus"], [data-font="noto"]) #scope-readout {
  font-family: var(--ui);
}

/*
 * The bitmap rows were drawn for 10/12 pixel text on a 12 pixel line. A smooth face is a little wider and
 * taller, so the HUD gets room: a wider info card (the longest coordinate line, "-12.3456°S 123.4567°E", must fit
 * without an ellipsis in every language), a 14 pixel line for the small text, and a touch of top padding on the
 * zoom readout so its first line is not squeezed against the card edge.
 */
:root:is([data-font="mplus"], [data-font="noto"]) #hud-info,
:root:is([data-font="mplus"], [data-font="noto"]) #zoom-readout {
  width: min(calc(124px * var(--px)), calc(100vw - 88px * var(--px)));
}

:root:is([data-font="mplus"], [data-font="noto"]) #moon-coords,
:root:is([data-font="mplus"], [data-font="noto"]) #place-elev {
  font-size: calc(10px * var(--px));
  line-height: calc(14px * var(--px));
}

/* The longest coordinate line ("51.0160°N 102.8869°W") needs a hair of tightening to fit the card in a smooth face. */
:root:is([data-font="mplus"], [data-font="noto"]) #moon-coords {
  letter-spacing: -0.03em;
}

:root:is([data-font="mplus"], [data-font="noto"]) #hud-culture {
  line-height: calc(14px * var(--px));
}

:root:is([data-font="mplus"], [data-font="noto"]) #zoom-readout {
  padding-top: calc(3px * var(--px));
}