/* boreale-site (README.md): what Boréale's sites share, loaded before each
   site's own site.css. The brand's colours and fonts (the charte,
   boreale/branding/README.md), the language menu and the menu of Boréale's
   sites. One dark look: the brand stands on the night. A page that is not
   dark (a simulator's light theme) loads it too and sets its own
   color-scheme and colours on :root after it: the two menus keep the night
   whatever the page around them (below). */
/* The fonts are served with the site rather than by Google Fonts, which would
   see every visitor (SIL Open Font License, fonts/OFL-*.txt): Sora for the
   headings, Figtree for the text, JetBrains Mono for addresses and commands,
   their Latin letters, every weight. */
@font-face { font-family: "Sora"; src: url("fonts/sora.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
/* The language menu's flags, the same everywhere (Windows draws none of its
   own): the 15 cut out of Twemoji's (CC-BY 4.0, fonts/LICENSE-twemoji-flags.txt).
   The other scripts (Cyrillic, Chinese, Japanese, Korean) fall back to the
   system's fonts. */
@font-face { font-family: "Twemoji Flags"; src: url("fonts/twemoji-flags.woff2") format("woff2"); unicode-range: U+1F1E6-1F1FF; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --abyss: #0b1424;
  --night: #0e1a33;
  --night-line: #22324f;
  --snow: #e8eef7;
  --mist: #a9b6cc;
  --dusk: #6f7e9c;
  --aurora: #00ffcc;
  --ice: #33bbff;
  --violet: #8a5cff;
  --aurora-grad: linear-gradient(100deg, var(--aurora) 0%, var(--ice) 55%, var(--violet) 100%);

  --display: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius: 16px;
  color-scheme: dark;
}

/* The header's two menus, their buttons included, on the night whatever
   the page around them: on a light page, or under a page's tokens
   redefined (a light reading), their own colours and the browser's dark
   controls (scrollbars). */
.switch, .sites, .lang-button, .langs {
  --abyss: #0b1424;
  --night: #0e1a33;
  --night-line: #22324f;
  --snow: #e8eef7;
  --mist: #a9b6cc;
  --aurora: #00ffcc;
  color-scheme: dark;
}

/* The languages: a button with the page's flag and name, and under it their
   menu (a popover, as the menu of Boréale's sites, in its look), this page's
   marked (Site.languages(), boreale.js). */
.settings { display: flex; }
.lang-button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px 0 12px;
  border: 1px solid var(--night-line); border-radius: 12px; background: rgb(14 26 51 / 0.7);
  color: var(--snow); font: 500 0.9375rem var(--body); cursor: pointer;
}
.lang-button:hover { border-color: var(--mist); }
.lang-button .chevron { width: 14px; height: 14px; flex: none; color: var(--mist); transition: transform 0.2s, color 0.2s; }
.lang-button:has(+ .langs:popover-open) .chevron { transform: rotate(180deg); color: var(--aurora); }
.lang-code { display: none; font: 500 0.8125rem var(--mono); }
/* A language's flag before its name, in the button and in the menu. */
.flag { flex: none; font: 18px/1 "Twemoji Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.langs .flag { margin-right: 10px; }
.langs {
  position: absolute; inset: auto; top: 72px; right: 16px; margin: 0;
  width: min(460px, calc(100vw - 24px)); max-height: min(70vh, 520px); overflow: auto; padding: 8px;
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  border: 1px solid var(--night-line); border-radius: 16px; color: var(--snow);
  background: radial-gradient(120% 80% at 0% 0%, rgb(0 255 204 / 0.08), transparent 60%),
              radial-gradient(100% 80% at 100% 100%, rgb(138 92 255 / 0.1), transparent 60%), var(--night);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(11 20 36 / 0.6);
}
.langs:not(:popover-open) { display: none; }
.langs::backdrop { background: transparent; }
.langs a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--snow); text-decoration: none; font-size: 0.9375rem; white-space: nowrap; }
.langs a:hover, .langs a:focus-visible { background: rgb(232 238 247 / 0.06); color: var(--snow); }
.langs a[aria-current] { background: rgb(0 255 204 / 0.08); box-shadow: inset 2px 0 0 var(--aurora); font-weight: 600; }
/* On a phone: the button shows the flag and the language's code; the menu
   in one column where two do not fit. */
@media (max-width: 640px) {
  .lang-name { display: none; }
  .lang-code { display: inline; }
  .settings { margin-left: auto; }
  .lang-button { gap: 6px; padding: 0 8px 0 10px; }
}
@media (max-width: 420px) {
  .lang-button .chevron { display: none; }
  .langs { grid-template-columns: minmax(0, 1fr); }
  .langs a { white-space: normal; }
}

/* ---- Boréale's site switcher: the name, a button that opens the menu of
   Boréale's sites (Site.switcher(), a popover: the browser closes it on Esc
   or a click elsewhere), the site's own leading home. The name keeps the
   site's .brand look; the colours are the brand's. */
.switcher { display: flex; flex-shrink: 0; align-items: center; }
.switch {
  min-height: 44px; margin-left: -8px; padding: 0 8px; border: 0; border-radius: 12px;
  background: transparent; color: #e8eef7; cursor: pointer; text-align: left;
}
.switch .chevron { width: 16px; height: 16px; color: #a9b6cc; transition: transform 0.2s, color 0.2s; }
.switch:hover { background: rgb(232 238 247 / 0.06); }
.switch:hover .chevron { color: #e8eef7; }
.switcher:has(.sites:popover-open) .chevron { transform: rotate(180deg); color: #00ffcc; }
.sites {
  position: absolute; inset: auto; top: 72px; left: 16px; margin: 0;
  width: min(400px, calc(100vw - 24px)); max-height: calc(100vh - 96px); overflow: auto; padding: 8px;
  border: 1px solid #22324f; border-radius: 16px; color: #e8eef7;
  background: radial-gradient(120% 80% at 0% 0%, rgb(0 255 204 / 0.08), transparent 60%),
              radial-gradient(100% 80% at 100% 100%, rgb(138 92 255 / 0.1), transparent 60%), #0e1a33;
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(11 20 36 / 0.6);
}
.sites::backdrop { background: transparent; }
.sites-title { margin: 14px 10px 6px; padding-top: 12px; border-top: 1px solid #22324f; font: 400 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #a9b6cc; }
.sites ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sites a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 10px; border-radius: 12px; color: #e8eef7; text-decoration: none;
}
.sites a:hover, .sites a:focus-visible { color: #e8eef7; background: rgb(232 238 247 / 0.06); }
.sites a[aria-current] { background: rgb(0 255 204 / 0.08); box-shadow: inset 2px 0 0 #00ffcc; }
.sites img { display: block; width: 36px; height: 36px; }
.sites strong { display: block; color: #e8eef7; font: 600 16px/1.3 var(--display); letter-spacing: -0.01em; }
.sites-version { margin-left: 6px; font: 400 12px var(--mono); letter-spacing: 0; color: #00ffcc; }
.sites small { display: block; color: #a9b6cc; font: 400 14px/1.35 var(--body); }
.sites .soon {
  font: 500 11px/1.6 var(--mono); font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  color: #ffb86b; border: 1px solid rgb(255 184 107 / 0.45); border-radius: 999px; padding: 1px 8px;
}
@media (prefers-reduced-motion: reduce) { .switch .chevron, .lang-button .chevron { transition: none; } }