/* SOTA shared styles: colors, type scale, the top bar with the site switcher, buttons and footer.
   The same file is in all three repositories, in main-website/public/assets/sota.css,
   guide-website/src/assets/sota.css and checklist-website/src/assets/sota.css. Change all three
   together. Each site's own stylesheet loads after this one and adds what only that site needs.
   Light by default, like a printed page; the dark palette below is opt-in. */

/* STIX Two Text, served from this site (assets/fonts/, SIL Open Font License, see OFL.txt there)
   instead of Google Fonts, so text can start drawing without two extra connections. One variable
   file per script covers every weight from 400 to 700. */
/* greek */
@font-face {
  font-family: "STIX Two Text";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/stix-two-text-italic-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: "STIX Two Text";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/stix-two-text-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "STIX Two Text";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/stix-two-text-italic-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;
}
/* greek */
@font-face {
  font-family: "STIX Two Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/stix-two-text-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: "STIX Two Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/stix-two-text-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "STIX Two Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/stix-two-text-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;
}


:root {
  --paper: #FFFFFF;
  --ink: #16161D;
  --graphite: #5F6070;
  --hairline: #DCDCE3;
  --plate: #F5F5F8;
  --red: #B31B1B;   /* the current place, and boxed buttons */
  --blue: #1F48C7;  /* links */

  --serif: "STIX Two Text", "STIX Two", Cambria, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale. Use these instead of new sizes, so the three sites stay alike. */
  --text-hero: 40px;    /* the headline of a home page */
  --text-title: 36px;   /* page titles */
  --text-h2: 24px;      /* section headings */
  --text-h3: 19px;      /* subsection headings */
  --text-body: 18px;    /* running text */
  --text-ui: 16px;      /* top bar, buttons, tables, captions */
  --text-small: 14.5px; /* meta lines, footer */
  --text-label: 14px;   /* small-caps labels */
  --leading: 1.6;

  /* One timing for the whole site, so every control reacts the same way. */
  --ease: cubic-bezier(.3, 0, .2, 1);
  --dur: .16s;          /* colour and border changes on hover */
  --dur-slow: .32s;     /* things that move or grow */

  --topbar-h: 58px;
  --gutter: 20px;
  --control-h: 32px; /* buttons, the search box and the menu toggle in the top bar */

  color-scheme: light;
}

@media (max-width: 980px) {
  :root {
    --topbar-h: 95px; /* the site switcher moves to a second row */
  }
}
@media (max-width: 760px) {
  :root {
    --text-body: 17px;
    --gutter: 16px;
  }
}

/* ---------- dark mode ----------
   Off by default: a reader turns it on with the top-bar toggle, and the choice is kept in a cookie
   on sota-ai.org, so all three sites (and their test copies) follow it. Only the colours change. */

:root[data-theme="dark"] {
  --paper: #14141A;
  --ink: #E9E9EE;
  --graphite: #A2A3B2;
  --hairline: #2E2F38;
  --plate: #1D1E26;
  --red: #E5736F;   /* the current place, and boxed buttons */
  --blue: #9DB5FF;  /* links */

  color-scheme: dark;
}

/* The toggle: an icon-only button in the top bar. The sun becomes a moon by sliding a masked
   circle across it while the rays spin away, and the whole thing is instant for anyone who asks
   for less motion. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  color: var(--graphite);
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { color: var(--ink); background: var(--plate); }
.theme-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.theme-icon {
  width: 19px;
  height: 19px;
  overflow: visible;
}
.theme-icon .sun {
  fill: currentColor;
  transition: transform .5s cubic-bezier(.3, 0, .2, 1);
  transform-origin: center;
}
.theme-icon .beams {
  transition: transform .5s cubic-bezier(.5, 1.6, .4, 1), opacity .3s ease;
  transform-origin: center;
}
.theme-icon .moon-mask circle {
  transition: transform .5s cubic-bezier(.3, 0, .2, 1);
}

/* Dark: the disc grows, the mask bites a crescent out of it, and the rays fold away. */
:root[data-theme="dark"] .theme-icon .sun { transform: translateX(1.4px) scale(1.4); }
:root[data-theme="dark"] .theme-icon .beams { transform: rotate(-25deg); opacity: 0; }
:root[data-theme="dark"] .theme-icon .moon-mask circle { transform: translate(-7px, 3px); }

@media (prefers-reduced-motion: reduce) {
  .theme-icon .sun,
  .theme-icon .beams,
  .theme-icon .moon-mask circle { transition: none; }
}

/* Switching theme: the new colours spread from the toggle as a circle (theme.js, flood). Both
   pictures of the page stay still and fully opaque; only the circle that reveals the new one moves.
   The top bar and the guide's sidebar have their own transition names for moving between pages;
   during the switch they must be part of the page, or they would fade instead of being swept. */
.theme-flood::view-transition-old(root),
.theme-flood::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
.theme-flood .topbar,
.theme-flood .sidebar { view-transition-name: none !important; }

/* ---------- base ---------- */

/* ---------- how controls respond ----------
   Everything a reader can click eases into its hover colours and dips slightly when pressed, so
   the page answers back. Anyone who asks for less motion gets the colour change without movement
   (see the reduced-motion rule at the end of this file). */

a,
button,
summary,
label,
input,
select,
.box,
.cell,
.chip {
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

/* A press dips the control a touch; links in running text are left alone. */
.box:active,
button:not(:disabled):active,
.sites a:active,
.topbar-tools a:active,
.footer-links a:active { transform: translateY(1px); }

/* .box keeps its own red hover fill, further down; this only makes buttons feel clickable. */
.box { cursor: pointer; }


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

html {
  -webkit-text-size-adjust: 100%;
  /* Jumping to a section glides instead of snapping; the reduced-motion rule below turns it off. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--text-body);
  line-height: var(--leading);
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, table { margin: 0; }

img { display: block; max-width: 100%; height: auto; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

::selection { background: color-mix(in srgb, var(--red) 20%, transparent); }

.num { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 6px 10px;
}
.skip:focus { left: 8px; }

/* Small-caps label, like "Contents" or "On this page" */
.label {
  font-size: var(--text-label);
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  color: var(--graphite);
}

/* Boxed link, like hyperref's red link borders */
.box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  /* STIX Two draws its letters about 1.5px above the middle of the line, so a little extra
     padding on top centres them by eye (measured with 4x screenshots). */
  padding: 3px 12px 0;
  border: 1px solid var(--red);
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.box:hover {
  background: var(--red);
  color: var(--paper);
  text-decoration: none;
}

/* ---------- top bar ---------- */
/* The logo, then the site switcher, then each site's own tools. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0 28px;
  height: var(--topbar-h);
  padding-inline: var(--gutter);
  font-size: var(--text-ui);
  line-height: 1.35;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding-block: 6px;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
/* The pixel mark: a 6×3 grid, sized in whole pixels per cell so edges stay crisp */
.brand-mark {
  display: block;
  width: 36px;
  height: 18px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.sites {
  display: flex;
  flex: none;
  align-items: center;
  gap: 24px;
}
/* Top-bar text links use the same line height and 3px nudge as the buttons, so every word in the
   bar sits on one line, centred (STIX Two draws a little high otherwise). */
.sites a,
.topbar-tools a:not(.box) {
  padding-top: 3px;
  line-height: 1;
}

.sites a {
  position: relative;
  color: var(--graphite);
  white-space: nowrap;
}
.sites a:hover { color: var(--ink); text-decoration: none; }
.sites a[aria-current] { color: var(--ink); }
/* The current site is underlined in red, like the current place elsewhere */
.sites a[aria-current]::after {
  content: "";
  position: absolute;
  inset: auto 0 -9px; /* about 7px below the letters; on phones, at the bottom of the switcher row */
  height: 2px;
  background: var(--red);
}

.topbar-tools {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  min-width: 0;
}
.topbar-tools a:not(.box) {
  color: var(--ink);
  white-space: nowrap;
}
.topbar-tools a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

@media (max-width: 980px) {
  .topbar {
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0 12px;
  }
  .brand { min-height: 56px; }
  .brand-mark { width: 30px; height: 15px; }
  /* Start from zero width, so a wide search box shrinks instead of pushing the tools onto a new row */
  .topbar-tools { flex: 1 1 0; gap: 14px; }
  .topbar-tools .opt { display: none; }
  .sites {
    order: 5;
    flex: 1 0 100%;
    gap: 22px;
    height: 38px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    font-size: 15px;
    border-top: 1px solid var(--hairline);
  }
}

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--hairline);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--graphite);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 28px var(--gutter) 36px;
}
.footer-note { flex: 1 0 100%; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.footer-links a { color: var(--ink); }

@media print {
  .topbar, .footer, .skip { display: none !important; }
}

/* ---------- loading ----------
   The SOTA mark with its squares lighting up one after another, for anything worth waiting for.
   The markup is an <svg viewBox="0 0 6 3"> of twelve 1x1 <rect>s, each with style="--i:<n>", in a
   .sota-loader, followed by a short line of text (account.js, profile.js and the guide's comments
   write it). .is-inline puts a small mark beside the text instead of above it. */
.sota-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: var(--text-ui);
  color: var(--graphite);
}
.sota-loader svg { width: 48px; height: 24px; fill: var(--ink); }
.sota-loader rect { animation: sota-loader 1.2s var(--ease) calc(var(--i) * 70ms) infinite; }
.sota-loader.is-inline { flex-direction: row; gap: 10px; }
.sota-loader.is-inline svg { flex: none; width: 22px; height: 11px; }
@keyframes sota-loader { 0%, 100% { opacity: 1; } 40% { opacity: .15; } }

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

/* Printing is always on paper: fall back to the light palette whatever the screen is set to. */
@media print {
  :root[data-theme="dark"] {
    --paper: #FFFFFF;
    --ink: #16161D;
    --graphite: #5F6070;
    --hairline: #DCDCE3;
    --plate: #F5F5F8;
    --red: #B31B1B;
    --blue: #1F48C7;
    color-scheme: light;
  }
  .theme-toggle { display: none; }
}