/*
  The Queue Expert: the website's own styles.

  There are two copies of this file: www/root/css/site.css (thequeueexpert.com) and
  www/cluster/css/site.css (each cluster's website). Keep them the same: change one, then copy
  it over the other (website/README.md lists every shared file).

  Web Awesome's styles load before this file (see index.html). They give us:
    - "tokens": CSS variables for colours and sizes. Example: --wa-space-m is 16px.
    - a good look for plain <button>, <input> and <select> elements.
  Web Awesome puts its rules in CSS "layers". A rule outside any layer, like every rule
  in this file, wins over a layered rule. So where both set the same thing, this file wins.

  Dark mode: the page is dark when <html> has the class "wa-dark". js/color-scheme.js adds the
  class when the visitor picks dark with the switch, or, if they never used it, when their
  device is set to dark mode.
  The rules under ":root" are the light colours. The rules under ":root.wa-dark" change them
  for dark mode.
*/


/* ---------- The font ---------- */

/*
  Inter, from our own copy in /vendor/inter-5.3.0 (Open Font License, see LICENSE.txt there).
  One file holds every weight, from thin (100) to black (900).
*/
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  /* Show the text at once in a system font, then switch to Inter when the file has loaded. */
  font-display: swap;
  /* Relative to this file (css/site.css), so it also works for a page opened from the disk. */
  src: url("../vendor/inter-5.3.0/inter-latin-wght-normal.woff2") format("woff2");
}


/* ---------- Colours ---------- */

:root {
  /* The three colours of the logo. */
  --brand-blue: #0665F1;        /* the ring and the tail of the Q */
  --brand-blue-light: #0F6FF3;  /* the five small squares */
  --brand-navy: #072C73;        /* the two big squares */

  /* The colours of the Q mark and the name. Dark mode changes some of them. */
  --q-ring-color: var(--brand-blue);
  --q-square-color: var(--brand-blue-light);
  --q-navy-square-color: var(--brand-navy);
  --brand-name-color: #0b1225;
  --brand-accent-color: var(--brand-blue);   /* the word "The" in the name, and "push" in the heading */

  /* Web Awesome's tokens, set to our brand. */
  --wa-font-family-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --wa-color-brand-fill-loud: var(--brand-blue);    /* filled buttons */
  --wa-color-brand-on-loud: #ffffff;                /* the text on filled buttons */
  --wa-color-brand-fill-quiet: #eaf2fe;             /* pale blue backgrounds */
  --wa-color-brand-on-quiet: var(--brand-navy);     /* text on a pale blue background, and outlined buttons */
  --wa-color-brand-border-loud: var(--brand-blue);  /* the border of outlined buttons */
  --wa-color-text-link: var(--brand-blue);
  --wa-color-focus: var(--brand-blue-light);        /* the ring around the part that has the keyboard focus */

  /* The page: white, with a hint of the brand's blue in the greys. */
  --wa-color-surface-default: #ffffff;
  --wa-color-surface-raised: #ffffff;
  --wa-color-surface-lowered: #f4f7fc;
  --wa-color-surface-border: #dfe6f1;
  --wa-color-text-normal: #0b1225;
  --wa-color-text-quiet: #4a5872;
}

:root.wa-dark {
  /* Navy squares cannot be seen on a dark page, so they turn white. The favicon does the same. */
  --q-navy-square-color: #ffffff;
  --brand-name-color: #ffffff;
  --brand-accent-color: #4d94ff;   /* a lighter blue is easier to read on a dark page */

  --wa-color-brand-fill-quiet: #0e2347;
  --wa-color-brand-on-quiet: #a9c9ff;
  --wa-color-text-link: #6ea8ff;

  /* The page: a very dark navy, close to the logo's navy. */
  --wa-color-surface-default: #0b1220;
  --wa-color-surface-raised: #111a2c;
  --wa-color-surface-lowered: #080e1a;
  --wa-color-surface-border: #24324d;
  --wa-color-text-normal: #e6ecf7;
  --wa-color-text-quiet: #a0aec8;
}


/* ---------- The whole page ---------- */

body {
  margin: 0;
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
}

/* A click on "Register interest" scrolls down smoothly, unless the visitor asked for less motion. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Keeps the content in a column of at most 72rem (1152px), with space at the sides. */
.page-width {
  box-sizing: border-box;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--wa-space-m);
}

@media (min-width: 48rem) {
  .page-width {
    padding-inline: var(--wa-space-xl);
  }
}

h2 {
  margin: 0;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.25rem);
  letter-spacing: -0.02em;
}

/* The line of text under each section's heading. */
.section-intro {
  margin: var(--wa-space-xs) 0 var(--wa-space-2xl);
  font-size: var(--wa-font-size-l);
  color: var(--wa-color-text-quiet);
}


/* ---------- The Q mark ---------- */

/* The <svg> that holds the drawing of the mark. It takes no space on the page. */
.svg-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.q-ring {
  stroke: var(--q-ring-color);
}

.q-tail {
  fill: var(--q-ring-color);
}

.q-square {
  fill: var(--q-square-color);
}

.q-navy {
  fill: var(--q-navy-square-color);
}


/* ---------- The header ---------- */

/*
  The logo on the left, the buttons on the right. When they do not fit on one line, for example
  the logo, "Log in" and the switch on a phone, the buttons move to a second line ("wrap"),
  still on the right. So the page never gets wider than the screen.
*/
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-s) var(--wa-space-m);
  padding-block: var(--wa-space-m);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--brand-name-color);
  text-decoration: none;
}

/* The mark is 647 wide and 400 high. At 2rem high, it is about 3.25rem wide. */
.brand-mark {
  flex: none;   /* keep its size when the header is short of space */
  width: 3.25rem;
  height: 2rem;
}

.brand-name {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand-the {
  color: var(--brand-accent-color);
}

/* The "Log in" menu, the light/dark switch and the "Register interest" button, side by side. */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
  margin-left: auto;   /* stay on the right, also on a second line */
}

/*
  Below 40rem (640px), the logo, the switch and this button do not fit on one line.
  The big "Register your interest" button under the heading is enough there.
*/
@media (max-width: 40rem) {
  .header-button {
    display: none;
  }
}


/* ---------- The "Log in" menu (root website) ---------- */

/*
  A <details> element: "Log in" is its <summary>, and a click opens the panel under it.
  Web Awesome draws every <details> as a box with a border, and a 24-pixel space under it. The
  rules here take both away, so "Log in" looks like a button, the panel floats over the page,
  and "Log in" sits on the same line as the switch. (With the space, the row of buttons was
  24 pixels taller, and "Log in" sat 12 pixels higher than the switch.)
*/
.login-menu {
  position: relative;
  flex: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

/* The "hidden" attribute must still hide it: Web Awesome's rules would otherwise show it. */
.login-menu[hidden] {
  display: none;
}

.login-menu[open] {
  padding: 0;
}

.login-menu summary {
  gap: var(--wa-space-2xs);
  min-height: var(--wa-form-control-height);   /* as high as the "Register interest" button */
  box-sizing: border-box;
  padding: 0 var(--wa-space-m);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-pill);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font-weight: 600;
  white-space: nowrap;
}

.login-menu summary:hover {
  background: var(--wa-color-surface-lowered);
}

/* Web Awesome moves the summary when the <details> opens. Keep it where it is. */
.login-menu[open] summary {
  margin-inline: 0;
  border-radius: var(--wa-border-radius-pill);
}

/* Web Awesome's arrow points right, and turns down when open. Here it points down, and turns up. */
.login-menu summary::after {
  rotate: 90deg;
}

.login-menu[open] summary::after {
  rotate: -90deg;
}

/* The panel with the list of clusters, under "Log in", lined up with its right edge. */
.login-menu-panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + var(--wa-space-xs));
  right: 0;
  width: max-content;
  min-width: 15rem;
  max-width: calc(100vw - 2 * var(--wa-space-m));
  box-sizing: border-box;
  padding: var(--wa-space-xs);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  background: var(--wa-color-surface-raised);
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.15);
}

.login-menu-title {
  margin: var(--wa-space-2xs) var(--wa-space-s) var(--wa-space-xs);
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

.login-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.login-menu-list li {
  margin: 0;
}

/* Each cluster: the label on the first line, the region under it in smaller grey text. */
.login-menu-list a {
  display: flex;
  flex-direction: column;
  padding: var(--wa-space-xs) var(--wa-space-s);
  border-radius: var(--wa-border-radius-m);
  color: var(--wa-color-text-normal);
  text-decoration: none;
}

.login-menu-list a:hover,
.login-menu-list a:focus-visible {
  background: var(--wa-color-brand-fill-quiet);
}

.login-menu-label {
  font-weight: 600;
}

.login-menu-region {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}


/* ---------- The light/dark switch ---------- */

/*
  A pill, 64 x 32 pixels, with a sun on the left and a moon on the right. A round knob slides
  under the icon of the mode that is on: under the moon in dark mode, under the sun in light mode.
  Web Awesome styles every <button> as a filled button. The rules here are outside its layers,
  so they win, and the switch looks like a switch.
*/
.theme-switch {
  position: relative;
  display: inline-block;
  flex: none;
  width: 4rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-pill);
  background-color: var(--wa-color-surface-lowered);
  color: var(--wa-color-text-quiet);
  transform: none;
  cursor: pointer;
}

/* The "hidden" attribute must still hide it: the display rule above would otherwise show it. */
.theme-switch[hidden] {
  display: none;
}

/* Web Awesome changes a button's colour on hover. Keep the switch's own colours. */
.theme-switch:hover,
.theme-switch:active {
  background-color: var(--wa-color-surface-lowered);
  transform: none;
}

/* The knob: a circle 24 pixels wide, 3 pixels in from the edge. */
.theme-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wa-color-surface-raised);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  transition: translate 0.2s ease;
}

/* In dark mode the knob moves 32 pixels to the right, under the moon. */
.theme-switch[aria-checked="true"] .theme-knob {
  translate: 32px 0;
}

@media (prefers-reduced-motion: reduce) {
  .theme-knob {
    transition: none;
  }
}

/* The two icons, each 16 pixels, centred over the two places the knob can be. They sit above the knob. */
.theme-icon {
  position: absolute;
  z-index: 1;
  top: 7px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-icon-sun {
  left: 7px;
}

.theme-icon-moon {
  right: 7px;
}

/* The icon of the mode that is on is in the brand's blue. */
.theme-switch[aria-checked="true"] .theme-icon-moon,
.theme-switch[aria-checked="false"] .theme-icon-sun {
  color: var(--brand-accent-color);
}


/* ---------- Part 1: the coming-soon message ---------- */

.hero {
  padding-block: var(--wa-space-3xl) var(--wa-space-4xl);
  /* A soft blue glow at the top right. */
  background: radial-gradient(60rem 30rem at 85% 0%, color-mix(in oklab, var(--brand-blue) 12%, transparent), transparent 70%);
}

/*
  The landing page's opening part fills the rest of the first screen: the screen's height minus
  the header's height. So the line under it (the top border of "What it does") is exactly where
  the first screen ends. The content sits in the middle of that space.
  --header-height comes from js/first-screen.js; without JavaScript it is 75 pixels.
  "svh" is the screen's height while a phone browser shows its address bar, so the line is not
  hidden under the bar. Browsers that do not know "svh" take the "vh" line before it.
  The "- 1px" makes the 1-pixel line the last row of the first screen, so it can be seen.
  Without it, the line would be the first row of the second screen.
  The space above and under the content is only 24 pixels, so as much room as possible is left
  for the content. On a tall screen this looks the same as more space, because the content is
  in the middle anyway.
*/
.hero-first-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-height: calc(100vh - var(--header-height, 75px) - 1px);
  min-height: calc(100svh - var(--header-height, 75px) - 1px);
  padding-block: var(--wa-space-l);
}

/*
  On a short screen, the text and buttons can still be taller than the room. Example: a laptop
  whose Chrome window shows 1366 x 625 pixels of page. Then js/first-screen.js puts a number
  below 1 in --hero-scale, and "zoom" shows the text and buttons smaller, so they fit and the line
  stays at the screen's end. Example: 0.9 is 90% of the full size. The script never goes below
  0.75; on a very short screen the line then comes just after the buttons. Without JavaScript
  the text keeps its full size (1).
*/
.hero-first-screen .hero-text {
  zoom: var(--hero-scale, 1);
}

/*
  On a phone (below 40rem, 640px), less space, so the opening part needs less shrinking (see
  .hero-text above). The header there has two lines (with the "Log in" menu), and the opening
  text has two paragraphs:
    - 24 pixels above the heading and under the buttons (also on the cluster websites' page);
    - 24 pixels between the text and the buttons, instead of 40 (.hero-buttons, below);
    - the opening text at the normal text size: 16 pixels instead of 20 (.lead, below).
*/
@media (max-width: 40rem) {
  .hero {
    padding-block: var(--wa-space-l);
  }
}

.hero-layout {
  display: grid;
  gap: var(--wa-space-2xl);
  align-items: center;
}

/* On a wide screen: the text on the left, a big Q mark on the right. */
@media (min-width: 56rem) {
  .hero-layout {
    grid-template-columns: 1.3fr 1fr;
  }
}

.coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--wa-space-l);
  padding: 0.3rem 0.8rem;
  border-radius: var(--wa-border-radius-pill);
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font-size: var(--wa-font-size-s);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A small square before "Coming soon", like the messages in the logo. */
.coming-soon::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--brand-blue);
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.highlight {
  color: var(--brand-accent-color);
}

.lead {
  max-width: 36rem;
  margin: var(--wa-space-l) 0 0;
  font-size: var(--wa-font-size-l);
  line-height: 1.55;
  color: var(--wa-color-text-quiet);
}

/* On a phone, the normal text size, so the opening part fits on the first screen (see .hero). */
@media (max-width: 40rem) {
  .lead {
    font-size: var(--wa-font-size-m);
  }
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wa-space-s);
  margin-top: var(--wa-space-2xl);
}

/* On a phone, less space above the buttons, so the opening part fits on the first screen (see .hero). */
@media (max-width: 40rem) {
  .hero-buttons {
    margin-top: var(--wa-space-l);
  }
}

.hero-mark {
  display: none;
}

@media (min-width: 56rem) {
  .hero-mark {
    display: block;
    justify-self: center;
    width: 100%;
    max-width: 26rem;
    aspect-ratio: 647 / 400;
  }
}

/*
  In the big mark, the seven squares (the messages) appear one after another, from left to
  right, when the page opens. The small mark in the header does not move.

  How it works: both marks are copies of one drawing (<use href="#q-mark">), so a rule
  cannot pick the squares of just one copy. Instead, .hero-mark sets the variable
  --square-animation, and every square reads it. The header's copy does not set the
  variable, so its squares get the default value "none": no animation.
*/
.hero-mark {
  --square-animation: square-appears 0.45s ease-out both;
}

.q-square {
  animation: var(--square-animation, none);
}

/* Each square starts 0.12 seconds after the one on its left. */
.q-square-1 { animation-delay: 0.15s; }
.q-square-2 { animation-delay: 0.27s; }
.q-square-3 { animation-delay: 0.39s; }
.q-square-4 { animation-delay: 0.51s; }
.q-square-5 { animation-delay: 0.63s; }
.q-square-6 { animation-delay: 0.75s; }
.q-square-7 { animation-delay: 0.87s; }

@keyframes square-appears {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark {
    --square-animation: none;
  }
}


/* ---------- Part 2: the features, and the tiers ---------- */

.features,
.tiers {
  padding-block: var(--wa-space-4xl);
}

.features {
  border-block: 1px solid var(--wa-color-surface-border);
  background: var(--wa-color-surface-lowered);
}

/* The cards sit in columns: as many 18rem columns as fit, and one column on a phone. */
.feature-grid,
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--wa-space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Web Awesome gives list items a margin on the left. The cards in a grid do not need it. */
.feature-grid > li,
.tier-grid > li {
  margin: 0;
}

.card {
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  padding: var(--wa-space-l);
  background: var(--wa-color-surface-raised);
}

/* The small heading over each group of features, such as "Delivery". */
.feature-group-title {
  margin: var(--wa-space-3xl) 0 var(--wa-space-m);
  color: var(--brand-accent-color);
  font-size: var(--wa-font-size-s);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The first group's heading sits closer to the line above it. */
.section-intro + .feature-group-title {
  margin-top: 0;
}

.card-title {
  margin: 0 0 var(--wa-space-xs);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/*
  A small square before each card's title, like the messages in the logo. It sits in the
  line of text, so a long title wraps under it, and the square stays next to the first word.
*/
.card-title::before {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.6rem;
  border-radius: 3px;
  background: var(--brand-blue-light);
}

.card p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--wa-color-text-quiet);
}

.card b {
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.card code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--wa-color-surface-lowered);
  font-size: 0.875em;
}

/* Something we plan to build, but have not built yet. Its border is dashed and a little darker. */
.card-planned {
  border-style: dashed;
  border-color: color-mix(in oklab, var(--wa-color-text-quiet) 45%, transparent);
}

.planned-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15rem 0.5rem;
  border: 1px dashed color-mix(in oklab, var(--wa-color-text-quiet) 45%, transparent);
  border-radius: var(--wa-border-radius-pill);
  color: var(--wa-color-text-quiet);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ---------- Part 3: "Register your interest" ---------- */

.register {
  padding-block: var(--wa-space-2xl) var(--wa-space-4xl);
}

.register-box {
  max-width: 36rem;
  margin-inline: auto;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  padding: var(--wa-space-2xl) var(--wa-space-xl);
  background: var(--wa-color-surface-raised);
  box-shadow: 0 1rem 3rem color-mix(in oklab, var(--brand-blue) 10%, transparent);
}

@media (max-width: 30rem) {
  .register-box {
    padding: var(--wa-space-l) var(--wa-space-m);
  }
}

.register-intro {
  margin: var(--wa-space-xs) 0 var(--wa-space-l);
  color: var(--wa-color-text-quiet);
}

.interest-form {
  display: grid;
  gap: var(--wa-space-m);
}

/*
  The box for spam robots. It is moved far off the left edge of the screen, so people
  never see it. (Hiding it with display: none would also hide it from some robots.)
*/
.robot-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The answer from the server, under the button. js/interest-form.js sets data-kind. */
.form-status {
  margin: 0;
  padding: var(--wa-space-s) var(--wa-space-m);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
  font-size: var(--wa-font-size-s);
}

.form-status[data-kind="success"] {
  border-color: var(--wa-color-success-border-quiet);
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
}

.form-status[data-kind="error"] {
  border-color: var(--wa-color-danger-border-quiet);
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
}

.privacy-note {
  margin: var(--wa-space-l) 0 0;
  padding-top: var(--wa-space-m);
  border-top: 1px solid var(--wa-color-surface-border);
  font-size: var(--wa-font-size-s);
  line-height: 1.6;
  color: var(--wa-color-text-quiet);
}

.privacy-note b {
  color: var(--wa-color-text-normal);
}


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

.site-footer {
  padding-block: var(--wa-space-l) var(--wa-space-2xl);
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

.site-footer p {
  margin: 0;
}