/* Page frame, language switcher, colours and font, shared by every indexable
   page and loaded before the page stylesheet, which can adjust them. #center is
   the 800px box of the page content; the frame is a card drawn behind it. The
   app pages also get the app navigation (icons at the top and the other apps at
   the bottom) and the styles of their shared content. */

/* Each app has a colour (red, green, blue) and a darker shade (4.5:1 at least
   on the card). The stylesheet of an app page sets --tint and --link to the
   colours of its app; the homepage shows the 3 colours.
   - The colour: the glow of the background, the marks that are decoration only
     (list marks, version pill) and the line at the top of the card, 20% darker.
   - The darker shade: the headings, the support link, the links on hover, and
     the dot of the current app, which shows a state.
   --chip is the background of the platform pill of the homepage and the cards
   of the other apps. */
:root {
  --compress: 242, 184, 0;
  --compress-link: #7a5a00;
  --speech: 10, 132, 255;
  --speech-link: #0062c4;
  --pwgenerator: 48, 209, 88;
  --pwgenerator-link: #1f7a33;
  --tint: 142, 142, 147; /* grey, for a page without an app */
  --link: #333333;
  --chip: #e8e8ed;
  /* The glow at the top of the window and the line at the top of the card,
     drawn below; the homepage sets its own. */
  --glow: radial-gradient(110% 70% at 50% -10%, rgba(var(--tint), 0.5), rgba(var(--tint), 0.12) 45%, transparent 75%);
  --line: linear-gradient(rgb(var(--tint)), rgb(var(--tint)));
}
/* Keeps the room of the scroll bar on every page: the frame stays at the same
   place from one page to the next. */
html {
  scrollbar-gutter: stable;
}
/* Dark background and the font of the system. */
body {
  margin-top: 40px;
  background-color: #0e0e10;
  color: #6e6e6e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
/* A glow of the colour of the page at the top of the window, which stays in
   place when the page scrolls. It is a fixed layer behind the page, not a fixed
   background: iOS shows a fixed background as a scrolling one, which repeats
   down the page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--glow);
}
h1 {
  color: #000;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: -0.02em;
}
/* Headings, in the dark shade of the colour of the page. */
h3,
#mail {
  color: var(--link);
  font-size: 17px;
  font-weight: bold;
}
h3 {
  margin: 15px 0;
}
/* Text and lists: 1.5 line spacing. */
p,
.bullets,
.checks,
.keys {
  line-height: 1.5;
}
/* Same place on every page, at any window width. */
#center {
  position: absolute;
  z-index: 0;
  left: 50%;
  width: 800px;
  margin: 30px 0 0 -395px;
}
/* The card of the frame, behind the content: 757px wide, 16px from the left of
   #center, from 37px above #center to its bottom, with a thin line at the top in
   the colour of the page, 20% darker under a black veil. */
#center::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -37px;
  bottom: 0;
  left: 16px;
  width: 757px;
  border-radius: 20px;
  background-color: #f5f5f7;
  background-image: linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2)), var(--line);
  background-repeat: no-repeat;
  background-size: 100% 4px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* Room under the card, also at the end of the scroll in a short window. */
#center::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 1px;
  height: 40px;
}

/* Language switcher, in the top-right corner of the card: a globe, then the
   code of each language, separated by thin bars. The card starts 37px above
   #center and ends 27px from its right: the switcher is 20px from the top edge
   (16px under the line at the top) and 16px from the right edge (the last
   letter adds 1px of letter spacing). */
#languages {
  position: absolute;
  top: -17px;
  right: 42px;
  padding-left: 19px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999999' stroke-width='1.2'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cellipse cx='8' cy='8' rx='2.8' ry='6.5'/%3E%3Cpath d='M1.5 8h13M2.6 4.5h10.8M2.6 11.5h10.8'/%3E%3C/svg%3E") no-repeat left center / 13px 13px;
  font-size: 12px;
  line-height: 13px;
  letter-spacing: 0.08em;
}
#languages ul,
#apps ul,
#more-apps ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
#languages li + li {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid #d0d0d0;
}
/* The padding makes the touch area larger (about 33 x 37px); the negative
   margin keeps the layout. The areas of 2 links meet at the bar. */
#languages a {
  display: inline-block;
  padding: 12px 8px;
  margin: -12px -8px;
  color: #6e6e6e;
  text-decoration: none;
}
#languages a:hover,
#languages a[aria-current="page"] {
  color: #333333;
}
#languages a[aria-current="page"] {
  font-weight: bold;
}
/* Native name of the language, for screen readers only. */
#languages .name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* App navigation, in the top-left corner of the card of the app pages: an icon
   for the homepage and for each app, in grey, except the current app, in
   colour with a dot under it. The grey icons keep a contrast of 3:1 at least.
   On hover, the icon gets its colours and its name shows in a bubble under it.
   The navigation is in the flow, on the line of the language switcher: its
   bottom padding moves the content down, so that the bubble does not cover the
   title (a margin would merge with the margin of the title). The first icon is
   16px from the left edge of the card, like the switcher from the right
   edge. */
#apps {
  margin: -24px 0 0 25px;
  padding-bottom: 26px;
}
#apps ul {
  gap: 6px;
}
#apps a {
  position: relative;
  display: block;
  padding: 3px;
  border-radius: 6px;
}
#apps a:hover,
#apps a:focus-visible {
  background-color: rgba(0, 0, 0, 0.06);
}
#apps img {
  display: block;
  filter: grayscale(1) opacity(0.75);
  transition: filter 0.2s;
}
#apps a:is(:hover, :focus-visible, [aria-current="page"]) img {
  filter: none;
}
#apps a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background-color: var(--link);
}
/* The name, for the bubble and for screen readers. */
#apps .label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 5px;
  background-color: rgba(40, 40, 40, 0.9);
  color: #ffffff;
  font-size: 12px;
  line-height: 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
#apps a:hover .label,
#apps a:focus-visible .label {
  opacity: 1;
}
/* The bubble of the first icon starts at the icon: it stays on the card. */
#apps li:first-child .label {
  left: 0;
  transform: none;
}

/* The last section of the card, under the floats of the content: the other
   apps on the app pages, the contact line on the homepage. */
#more-apps,
#contact {
  clear: both;
  margin: 0 60px 0 50px;
}
/* The other apps, at the bottom of the app pages: a card for each app, with its
   icon and its tagline, and a link to the homepage. The space above the line is
   a padding: a margin would go into the clearance of the floats. */
#more-apps {
  padding: 30px 0 20px;
}
/* Head of a section at the bottom of the card (the other apps, and the contact
   line of the homepage): a title on the left and a link on the right, under a
   line. The title is grey, not in the colour of the page: the section is not
   about the current app. */
.head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 22px;
  border-top: 1px solid #dddddd;
}
.head h3 {
  margin: 0;
  font-size: 17px;
}
.head h3,
#more-apps .name {
  color: #555555;
}
.head a {
  color: inherit;
  font-size: 14px;
  text-decoration: none;
}
#more-apps .head {
  margin-bottom: 14px;
}
#more-apps ul {
  gap: 16px;
}
#more-apps li {
  flex: 1;
}
/* The cards of the other apps, with the same space on every side of the icon.
   White with a shadow on hover. A touch screen keeps the hover after a touch,
   also when the finger scrolls the page: the hover effect is only for the
   devices that can hover. The same effect on :active shows on a touch screen
   while the finger is on the link, in place of the grey highlight of the
   browser, and the browser removes it when the finger scrolls the page. With a
   mouse, a pressed link is also hovered: nothing changes. Safari on iOS needs
   js/touch.js for :active. */
#more-apps li a {
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  height: 100%;
  padding: 12px;
  border-radius: 12px;
  background-color: var(--chip);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  #more-apps li a:hover {
    background-color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
  }
}
#more-apps li a:active {
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}
#more-apps .name {
  display: block;
  font-size: 17px;
  font-weight: bold;
}
/* Darker than the body text: 4.5:1 at least on the card. */
#more-apps .tagline {
  display: block;
  color: #666666;
  font-size: 14px;
  line-height: 1.3em;
}

/* Support links of the app pages. */
#mail {
  text-decoration: none;
}
#mail2 {
  color: #6e6e6e;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
}
/* Text links: in the colour of the app and underlined on hover. */
.head a:hover,
#mail:hover,
#mail2:hover {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Lists of the app pages, with marks in the colour of the app: dots, check
   marks, and keyboard shortcuts with their keys. */
.bullets,
.checks,
.keys {
  margin: 10px 0 18px;
  padding: 0;
  list-style: none;
}
.bullets li,
.checks li {
  position: relative;
  padding-left: 24px;
}
:is(.bullets, .checks, .keys) li + li {
  margin-top: 6px;
}
.bullets li::before,
.checks li::before {
  content: "";
  position: absolute;
  background-color: rgb(var(--tint));
}
.bullets li::before {
  left: 6px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.checks li::before {
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.1 3.1L13.2 4.4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  left: 0;
  top: 0.22em;
  width: 16px;
  height: 16px;
  -webkit-mask: var(--check) no-repeat center / contain;
  mask: var(--check) no-repeat center / contain;
}
kbd {
  display: inline-block;
  min-width: 26px;
  margin-right: 10px;
  padding: 0 6px;
  border: 1px solid #d2d2d7;
  border-bottom-width: 2px;
  border-radius: 6px;
  background-color: #ffffff;
  color: #333333;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

/* App Store badge, and the version and system in a pill next to it. The badge
   needs a clear space of 10px at least, and the pill is centred on its 40px. */
#button {
  float: left;
}
#version {
  display: inline-block;
  margin: 8px 0 0 12px;
  padding: 0 10px;
  border-radius: 12px;
  background-color: rgba(var(--tint), 0.18);
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}
#requ {
  font-size: 13px;
  font-weight: normal;
}
/* The dot is for the eyes only: screen readers skip it. */
#requ::before {
  content: "·";
  content: "·" / "";
  margin: 0 5px 0 1px;
}

/* Trademark notice that Apple requires with the App Store badge, at the bottom
   of the app pages. */
#trademarks {
  margin: 0 60px 30px 50px;
  font-size: 12px;
  line-height: 1.4;
}