/* The site's shared styles, on every page after femto and its responsive-spacings option: the
   site's own tokens for each color scheme, the header, document and footer layout, and the skip
   link, screen-reader-only text, logo, theme toggle, chapter label and component card. Code blocks
   are in code.css. */

/* Landmarks and sections get 4 times --femto-spacing above and below from 1536px up, past the
   2.25 that responsive-spacings.css gives them */
@media (min-width: 1536px) {
  body > header,
  body > main,
  body > footer,
  section {
    --femto-block-spacing-vertical: calc(var(--femto-spacing) * 4);
  }
}

/**
 * Color schemes
 * --femto-code-comment, the color of Prism's comment and doctype tokens, keeps 4.5:1 on every code
 * block background (the card, the card footer and femto's code background) in both schemes
 * (criterion 10): #667080 in light, #828b9b in dark.
 */

/* Light color scheme (Default)
   Can be forced with data-theme="light" */
[data-theme=light],
:root:not([data-theme=dark]),
:host:not([data-theme=dark]) {
  /* Header */
  --femto-header-background: rgba(255, 255, 255, 0.8);
  --femto-header-border-color: transparent;
  /* Logo */
  --femto-logo-wordmark: #2a3140;
  --femto-logo-small-sparkles: #ffbf00;
  --femto-logo-big-sparkle: #ff9500;
  /* Card for components */
  --femto-card-component-outline-width: 0;
  --femto-card-component-outline-color: transparent;
  /* Code */
  --femto-code-color: #5c6370;
  --femto-code-tag: #8b4f00;
  --femto-code-attr: rgb(152, 45.75, 121);
  --femto-code-value: #2e685b;
  --femto-code-comment: #667080;
  --femto-code-copied: rgb(28.5, 105.5, 84);
  /* Chapter */
  --femto-chapter-color: var(--femto-code-tag);
}

/* Footer */
[data-theme=light] footer,
:root:not([data-theme=dark]) footer,
:host:not([data-theme=dark]) footer {
  --femto-logo-small-sparkles: #cfd5e2;
  --femto-logo-big-sparkle: #b0b9d0;
}

/* Dark color scheme (Auto)
   Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :host:not([data-theme]) {
    /* Header */
    --femto-header-background: rgba(19, 22.5, 30.5, 0.9);
    --femto-header-border-color: rgba(32, 38, 50, 0.9);
    /* Logo */
    --femto-logo-wordmark: #fff;
    --femto-logo-small-sparkles: #ff9500;
    --femto-logo-big-sparkle: #ffbf00;
    /* Card for components */
    --femto-card-component-outline-width: 2px;
    --femto-card-component-outline-color: var(--femto-card-background-color);
    /* Code */
    --femto-code-color: #969eaf;
    --femto-code-tag: rgb(186.75, 150.5, 43.75);
    --femto-code-attr: rgb(199, 131.5, 183);
    --femto-code-value: rgb(112.5, 163.5, 161.25);
    --femto-code-comment: #828b9b;
    --femto-code-copied: #62af9a;
    /* Chapter */
    --femto-chapter-color: var(--femto-code-tag);
  }

  /* Footer */
  :root:not([data-theme]) footer,
  :host:not([data-theme]) footer {
    --femto-logo-small-sparkles: #5d6b89;
    --femto-logo-big-sparkle: #8191b5;
  }
}

/* Dark color scheme (Forced)
   Enabled if forced with data-theme="dark" */
[data-theme=dark] {
  /* Header */
  --femto-header-background: rgba(19, 22.5, 30.5, 0.9);
  --femto-header-border-color: rgba(32, 38, 50, 0.9);
  /* Logo */
  --femto-logo-wordmark: #fff;
  --femto-logo-small-sparkles: #ff9500;
  --femto-logo-big-sparkle: #ffbf00;
  /* Card for components */
  --femto-card-component-outline-width: 2px;
  --femto-card-component-outline-color: var(--femto-card-background-color);
  /* Code */
  --femto-code-color: #969eaf;
  --femto-code-tag: rgb(186.75, 150.5, 43.75);
  --femto-code-attr: rgb(199, 131.5, 183);
  --femto-code-value: rgb(112.5, 163.5, 161.25);
  --femto-code-comment: #828b9b;
  --femto-code-copied: #62af9a;
  /* Chapter */
  --femto-chapter-color: var(--femto-code-tag);
}

/* Footer */
[data-theme=dark] footer {
  --femto-logo-small-sparkles: #5d6b89;
  --femto-logo-big-sparkle: #8191b5;
}

/**
 * Header
 */
html {
  --femto-header-height: calc(4.5rem + var(--femto-border-width));
}

body > header {
  z-index: 4;
  position: relative;
  padding: 0.5rem 0;
  border-bottom: var(--femto-border-width) solid transparent;
}

body > header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body > header .container > a {
  margin: calc(var(--femto-spacing) * -0.125) calc(var(--femto-spacing) * -0.25);
  padding: calc(var(--femto-spacing) * 0.125) calc(var(--femto-spacing) * 0.25);
  border-radius: var(--femto-border-radius);
}

body > header .container > a svg.femto-logo {
  transform: translateY(-22%);
}

body > header .container nav svg {
  display: inline-block;
  width: auto;
  height: 1.125rem;
  transform: translateY(-0.0625rem);
}

/* The color-scheme toggle is a <button type="button">, drawn as the header's contrast links are:
   femto's nav link box, no border or background, the contrast link colors, and femto's link focus
   ring on keyboard focus only. No transition: Firefox styles the docs page once before the site's
   stylesheets apply (docs.html links them after the head scripts), so a transition here would run
   on load from femto's button colors, white on the primary background */
body > header .container nav ul.icons button {
  --femto-color: var(--femto-contrast);
  display: inline-block;
  max-width: none;
  margin: calc(var(--femto-nav-link-spacing-vertical) * -1) calc(var(--femto-nav-link-spacing-horizontal) * -1);
  padding: var(--femto-nav-link-spacing-vertical) var(--femto-nav-link-spacing-horizontal);
  border: 0;
  border-radius: var(--femto-border-radius);
  background-color: transparent;
  box-shadow: none;
  color: var(--femto-color);
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  transition: none;
}

body > header .container nav ul.icons button:is(:hover, :active, :focus) {
  --femto-color: var(--femto-contrast-hover);
}

body > header .container nav ul.icons button:focus-visible {
  box-shadow: 0 0 0 var(--femto-outline-width) var(--femto-primary-focus);
}

/* Hide docs link on mobile */
@media (max-width: 575px) {
  body > header .container nav ul li.hide-before-sm {
    display: none;
  }
}

/* Icons separator */
@media (min-width: 576px) {
  body > header .container nav ul.icons::before {
    display: block;
    height: 1.125rem;
    margin-inline: var(--femto-nav-element-spacing-horizontal);
    border-left: var(--femto-border-width) solid var(--femto-form-element-border-color);
    content: "";
  }
}

/* Fixed header: the docs header, from 1024px up (site.js adds is-fixed once the page scrolls) */
@media (min-width: 1024px) {
  body > header.is-fixed-above-lg {
    z-index: 2;
    position: sticky;
    top: 0;
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    background-color: var(--femto-header-background);
    transition: border-top-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  }

  body > header.is-fixed-above-lg.is-fixed {
    border-bottom-color: var(--femto-header-border-color);
    box-shadow: var(--femto-card-box-shadow);
  }
}

/**
 * Document
 * The oracle's scroll-behavior: smooth on html is gone: Decision 10 gives it to a class that the
 * docs page's script sets during a nav click (Phase 3).
 */
html {
  overflow-x: hidden;
}

/* Header, main and footer. The oracle's rows were auto auto 1fr auto, with the maintenance banner
   first, which the site drops (Decision 5): main takes the free space again, not the footer. The
   min-height is what the oracle's server HTML gave <body> as style="min-height:100vh", until
   site.js sets innerHeight in px */
html body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  min-height: 100vh;
}

/**
 * Footer
 */
body > footer .container section:first-of-type {
  display: grid;
  grid-template-areas: "logo" "links" "resources" "built";
  column-gap: calc(var(--femto-spacing) * 2);
  row-gap: calc(var(--femto-spacing) * 2);
  justify-content: stretch;
  font-size: 14px;
}

@media (min-width: 768px) {
  body > footer .container section:first-of-type {
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo links" "built built" "resources resources";
    row-gap: calc(var(--femto-spacing) * 2);
    justify-content: space-around;
  }
}

@media (min-width: 1024px) {
  body > footer .container section:first-of-type {
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "logo links" "built links" "resources links";
    row-gap: var(--femto-spacing);
  }
}

@media (min-width: 1280px) {
  body > footer .container section:first-of-type {
    column-gap: calc(var(--femto-spacing) * 4);
  }
}

/* Logo */
body > footer .container section:first-of-type svg.femto-icon {
  grid-area: logo;
}

/* Links */
body > footer .container section:first-of-type nav.links {
  --femto-nav-element-spacing-vertical: 0.125rem;
  --femto-nav-link-spacing-vertical: 0.125rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--femto-spacing) * 3);
  row-gap: calc(var(--femto-spacing) * 2);
  grid-area: links;
  align-items: start;
  width: fit-content;
}

@media (min-width: 576px) {
  body > footer .container section:first-of-type nav.links {
    column-gap: calc(var(--femto-spacing) * 6);
  }
}

@media (min-width: 768px) {
  body > footer .container section:first-of-type nav.links {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: calc(var(--femto-spacing) * 2);
    justify-content: flex-end;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  body > footer .container section:first-of-type nav.links {
    margin-left: auto;
  }
}

@media (min-width: 1280px) {
  body > footer .container section:first-of-type nav.links {
    column-gap: calc(var(--femto-spacing) * 4);
    margin-left: auto;
  }
}

body > footer .container section:first-of-type nav.links ul {
  display: grid;
  margin-inline: calc(var(--femto-nav-element-spacing-horizontal) * -1);
}

body > footer .container section:first-of-type nav.links ul li {
  display: block;
}

body > footer .container section:first-of-type nav.links ul li strong a {
  color: currentColor;
}

/* Build info */
body > footer .container section:first-of-type p.build-info {
  grid-area: built;
  margin-bottom: 0;
  color: var(--femto-muted-color);
  text-wrap: balance;
}

/* Resources */
body > footer .container section:first-of-type ul.resources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: calc(var(--femto-spacing) / 2);
  grid-area: resources;
  width: fit-content;
  margin-bottom: 0;
  padding: 0;
}

body > footer .container section:first-of-type ul.resources li {
  margin: 0;
  list-style: none;
}

body > footer .container section:first-of-type ul.resources li svg {
  display: inline-block;
  width: auto;
  height: 1rem;
}

body > footer .container section:last-of-type {
  margin-block: calc(var(--femto-spacing) * 2);
  padding-top: calc(var(--femto-spacing) * 2);
  border-top: var(--femto-border-width) solid var(--femto-muted-border-color);
  font-size: 12px;
}

body > footer .container section:last-of-type p {
  margin-bottom: 0;
  color: var(--femto-muted-color);
}

@media (min-width: 576px) {
  body > footer .container section:last-of-type p {
    display: inline;
  }

  body > footer .container section:last-of-type p:not(:first-of-type) {
    margin-inline-start: calc(var(--femto-spacing) / 2);
  }
}

body > footer .container section:last-of-type p code {
  padding: 0;
  background-color: transparent;
  font-size: 1em;
}

/**
 * Skip to content
 */

/* A plain link (it navigates, so it has no button role), drawn as femto's .contrast button: its
   padding, border, radius, colors and focus ring from femto's button tokens, with no underline. It
   sits above the page out of view until it takes focus. Its text color is set directly, not through
   --femto-color, which femto's link rules set on a focused link at a higher specificity (a focused
   a.contrast gets --femto-contrast-hover, the color of this link's background) */
a.skip-to-content {
  --femto-background-color: var(--femto-contrast-background);
  --femto-border-color: var(--femto-contrast-border);
  --femto-box-shadow: var(--femto-card-box-shadow);
  --femto-text-decoration: none;
  display: inline-block;
  z-index: 999;
  position: absolute;
  top: calc(var(--femto-spacing) * 0.75);
  left: calc(var(--femto-spacing) * 0.75);
  padding: var(--femto-form-element-spacing-vertical) var(--femto-form-element-spacing-horizontal);
  border: var(--femto-border-width) solid var(--femto-border-color);
  border-radius: var(--femto-border-radius);
  background-color: var(--femto-background-color);
  box-shadow: var(--femto-box-shadow);
  color: var(--femto-contrast-inverse);
  font-weight: var(--femto-font-weight);
  font-size: 1rem;
  line-height: var(--femto-line-height);
  text-align: center;
  transform: translateY(-1000%);
  opacity: 0;
}

a.skip-to-content:focus {
  --femto-background-color: var(--femto-contrast-hover-background);
  --femto-border-color: var(--femto-contrast-hover-border);
  --femto-box-shadow: var(--femto-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--femto-outline-width) var(--femto-contrast-focus);
  --femto-text-decoration: none;
  transform: translateY(0);
  opacity: 1;
}

/* Text for screen readers only: the status region site.js writes "Copied" into. Out of the body's
   grid flow, one pixel, clipped */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  white-space: nowrap;
  clip-path: inset(50%);
}

/**
 * Logo
 */
svg.femto-logo,
svg.femto-icon {
  width: auto;
  height: 2.25rem;
}

/* The three sparkles of an animated logo pop in one after the other */
svg.femto-logo.animated path:first-of-type,
svg.femto-logo.animated path:nth-of-type(2),
svg.femto-logo.animated path:nth-of-type(3),
svg.femto-icon.animated path:first-of-type,
svg.femto-icon.animated path:nth-of-type(2),
svg.femto-icon.animated path:nth-of-type(3) {
  animation-duration: var(--animate-duration);
  animation-timing-function: ease-in-out;
  animation-delay: var(--animate-delay);
  animation-fill-mode: both;
  animation-name: sparkle;
}

svg.femto-logo.animated path:nth-of-type(3),
svg.femto-icon.animated path:nth-of-type(3) {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  transform-origin: 1825.3px 293.1px;
}

svg.femto-logo.animated path:first-of-type,
svg.femto-icon.animated path:first-of-type {
  --animate-duration: 0.75s;
  --animate-delay: 0.125s;
  transform-origin: 2034.8px 200px;
}

svg.femto-logo.animated path:nth-of-type(2),
svg.femto-icon.animated path:nth-of-type(2) {
  --animate-duration: 0.5s;
  --animate-delay: 0.375s;
  transform-origin: 1855.2px 84.6px;
}

@keyframes sparkle {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  20% {
    transform: scale(1.25);
    opacity: 1;
  }

  45% {
    transform: scale(1);
  }

  55% {
    transform: scale(1.25);
    opacity: 0.75;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

/**
 * Theme toggle
 */

/* Theme toggle icon (Decision 16): a sun emoji while the page is light, a moon while it is dark,
   which site.js and docs.js write into the button's span[role=img] (Decision 18). The glyph is
   transparent and its shadow is drawn in --femto-color, so the emoji shows as a one-color
   silhouette that follows the button's hover colors. The box is the oracle's SVG icon box (1.125rem
   in the header, 1.25rem in the Color schemes section, vertical-align: middle), and the glyph is
   centered in it and overflows it evenly, so nothing around the icon moves when sun and moon swap.
   It replaces the oracle's animated toggles.dev SVG, and that SVG's rules with it. */
:is(button[data-scheme-toggle], button[data-scheme-switcher]) > span[role=img] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  min-width: 0;
  height: 1.125rem;
  color: transparent;
  font-size: 1.25rem;
  text-shadow: 0 0 0 var(--femto-color);
  vertical-align: middle;
}

/* The header's toggle: the glyph is the GitHub icon's size and sits where it does. The GitHub mark
   (Simple Icons', Decision 17) fills 23.4 of its 24-unit viewBox's height, and each glyph's
   silhouette is about its font size (sun 0.99, moon 1.01, in Chrome and Firefox); the box is nudged
   up as the header's SVGs are */
body > header .container nav button[data-scheme-toggle] > span[role=img] {
  font-size: calc(1.125rem * 23.4 / 24);
  transform: translateY(-0.0625rem);
}

/* The Color schemes section: the switcher button's icon, before its label */
#theme-switcher button > span[role=img] {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: calc(var(--femto-spacing) * 0.5);
}

/**
 * Icons (Decision 18)
 */

/* Every icon but the brand marks and femto's own logo is a character in a <span role="img">, an
   image made of text: named by its aria-label when it is a control's only content (a copy or close
   button, the theme toggle), and hidden by aria-hidden="true" beside a label of its own, as an
   <img> takes alt text or alt="". The role is the hook, so the markup needs no class. Each icon is
   an inline-block at least 1em wide and one 1em line tall, its characters centered in it and on
   their line's baseline, as text is. A context sizes an icon with font-size, as it sized the SVG it
   replaced with height, and draws one glyph larger, bolder or in another font where it needs to.
   The text characters (check ✓, close ✕, copy ⧉, edit ✎, menu ☰, arrow →, Grid's ⊕ and ⊖, the
   homepage's ⤢, ◐ and </>) have no emoji form, so every platform draws them with its own text
   fonts, in the element's color; the emoji (the theme toggle's, the homepage's ⚙️ and ⚡) are drawn
   in one color by their contexts, as a transparent glyph and its shadow. */
span[role=img] {
  display: inline-block;
  min-width: 1em;
  line-height: 1;
  text-align: center;
}

/* The check pops in each time it is added: a copy button's "Copied" (code.css) and the picked theme
   swatch's (docs.css) */
@keyframes icon-check {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
}

/**
 * Chapter: the category label in a docs page's hgroup, above its title
 */
.chapter {
  color: var(--femto-chapter-color);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}

/**
 * Card component: the card around a live example
 */
article.component {
  outline-color: var(--femto-card-component-outline-color);
  outline-style: solid;
  outline-width: var(--femto-card-component-outline-width);
  background-color: transparent;
}