/*
 * The site's one stylesheet: the faces, the tokens, the base layout with its
 * header and footer, and the landing page. The imports are relative, so no
 * request leaves this site and the stylesheet works under any path prefix.
 * The look is the app's landing page.
 */
@import url("fonts.css");
@import url("tokens.css");
@import url("landing.css");

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

html {
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-canvas);
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
}

a {
  color: var(--color-brand);
}

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: absolute;
  z-index: 20;
  left: 1rem;
  top: -3rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-hairline-strong);
}

.skip-link:focus {
  top: 1rem;
}

/* The width every section's content keeps, with a 20px gutter on a phone. */
.wrap {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 768px) {
  .wrap {
    padding-left: 32px;
    padding-right: 32px;
  }
}

main {
  flex: 1;
  width: 100%;
}

/* The logo: the torch and the outlined wordmark, inline <svg>s whose size
   is set on each. The wordmark is drawn in the text
   colour of the theme; the torch keeps its own colours in both. */
.fluentor-mark-small,
.fluentor-wordmark {
  display: block;
  flex-shrink: 0;
}

.l1 {
  background: var(--color-level-1);
}

.l2 {
  background: var(--color-level-2);
}

.l3 {
  background: var(--color-level-3);
}

.l4 {
  background: var(--color-level-4);
}

.l5 {
  background: var(--color-level-5);
}

/* The header, as the original landing page draws it: the logo 16px from
   the left with 12px above and below it (20px from 768px), the controls
   12px from the top and 16px from the right (32px from 768px), nothing
   between them. Unlike the original it stays at the top while the page
   scrolls (the owner's decision), on the page's own canvas so
   nothing shows through it. --header-height is its height, the logo's
   padding and the 40px torch; the page scrolls an anchor to just under it. */
:root {
  --header-height: 64px;
}

@media (min-width: 768px) {
  :root {
    --header-height: 80px;
  }
}

html {
  scroll-padding-top: calc(var(--header-height) + 16px);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  min-height: var(--header-height);
  background: var(--color-canvas);
}

.site-name {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 12px 16px;
  color: var(--color-text);
  text-decoration: none;
}

@media (min-width: 768px) {
  .site-name {
    padding: 20px 0 20px 16px;
  }
}

.site-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 0;
}

@media (min-width: 768px) {
  .site-controls {
    padding: 12px 32px 12px 0;
  }
}

.site-switches {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The theme switch: a 32px round button, its glyph the theme shown. */
.theme-toggle {
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-hairline);
  border-radius: calc(infinity * 1px);
  background: transparent;
  color: var(--color-text-subtle);
  font: 400 16px/24px var(--font-sans);
  cursor: pointer;
  transition-property: color, background-color, border-color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* The original's focus ring: 2px of the brand colour, no gap. */
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-brand);
}

.theme-toggle:hover {
  border-color: var(--color-hairline-strong);
  color: var(--color-text);
}

html.js .theme-toggle.js-only-inline {
  display: inline-grid;
}

.theme-dark,
.theme-light {
  font-size: 13px;
  line-height: 1;
}

.theme-light,
html.light .theme-dark {
  display: none;
}

html.light .theme-light {
  display: inline;
}

/* The language switch: one bordered group, the current language on the
   brand colour. */
.lang-switch {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.lang-option {
  padding: 6px 10px;
  background: var(--color-surface);
  color: var(--color-text-subtle);
  text-decoration: none;
  transition-property: color, background-color, border-color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-option:hover {
  background: var(--color-raised);
}

/* The original's focus ring: 3px of the brand colour at 60 %, outside the
   language, so the group's clip hides most of it, as it does there. */
.lang-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-brand) 60%, transparent);
}

.lang-option[aria-current="page"] {
  background: var(--color-brand);
  color: var(--color-canvas);
}

/* The theme switch needs JavaScript: shown only once theme.js has marked
   the page. */
.js-only-inline {
  display: none;
}

html.js .js-only-inline {
  display: inline-flex;
}

.sign-in {
  color: var(--color-text-subtle);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition-property: color, background-color, border-color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.sign-in:hover {
  color: var(--color-text);
}

/* The footer. */
.site-footer {
  border-top: 1px solid var(--color-hairline);
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 40px;
}

.footer-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-tag {
  max-width: 20rem;
  color: var(--color-text-subtle);
  font-size: 14px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 32px 0 0;
  padding: 24px 0 40px;
  border-top: 1px solid var(--color-hairline);
  list-style: none;
  color: var(--color-text-subtle);
  font-size: 14px;
}

/* The root page, which only sends a visitor on to a language. */
.languages {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 2rem 0;
  font-size: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

.footer-legal a {
  color: var(--color-text-subtle);
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--color-text);
}

/* A legal text (src/legal.njk): one readable column, as the app shows it. */
.legal {
  max-width: 44rem;
  padding-top: 48px;
  padding-bottom: 64px;
}

.legal h1 {
  font-size: clamp(1.875rem, 4vw, 2.25rem);
  color: var(--color-text);
}

.legal-dates {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.legal-notice {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--color-notice);
  border-radius: 6px;
  background: var(--color-notice-soft);
  color: var(--color-text-muted);
  font-size: 14px;
}

.legal-intro {
  margin-top: 24px;
}

.legal h2 {
  margin-top: 36px;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  color: var(--color-text);
}

.legal p,
.legal li {
  color: var(--color-text-muted);
}

.legal section p,
.legal ul {
  margin-top: 12px;
}

.legal ul {
  padding-left: 20px;
}

.legal li + li {
  margin-top: 8px;
}