/* The site, in the app's colours: the ink ramp, linen, juniper and ember, matching the admin
   panel's tokens so the two published surfaces are recognisably one app. Dark first, light from the
   system. No JavaScript anywhere, and no web font: the app's own face is not licensed for the web
   and a system stack reads better than a wrong one. See D-300. */

:root {
  --ink-900: #0a0c0e;
  --ink-800: #14171a;
  --linen: #fbf8f2;
  --juniper: #5dcdbf;
  --juniper-deep: #018d87;
  --ember: #f68c53;

  --page: var(--ink-900);
  --card: var(--ink-800);
  --line: rgba(251, 248, 242, 0.12);
  --text: var(--linen);
  /* The quiet ink at the opacity E-049 settled on, not the 0.38 the boards used to give it. */
  --muted: rgba(251, 248, 242, 0.62);
  --accent: var(--juniper);
  --mark: var(--linen);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --page: #f2efe8;
    --card: #ffffff;
    --line: rgba(23, 24, 26, 0.14);
    --text: #17181a;
    --muted: rgba(23, 24, 26, 0.62);
    --accent: var(--juniper-deep);
    --mark: #22262a;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* The bar */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 44rem;
  margin: 0 auto;
  padding: 20px 22px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mark {
  width: 28px;
  height: 28px;
  flex: none;
}

.bar nav {
  display: flex;
  gap: 18px;
  font-size: 15px;
}

.bar nav a {
  color: var(--muted);
  text-decoration: none;
}

.bar nav a:hover,
.bar nav a:focus-visible {
  color: var(--text);
}

.bar nav a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* The page */

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 10px 22px 8px;
}

h1 {
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 28px 0 6px;
}

h2 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 2.1em 0 0.35em;
}

h3 {
  font-size: 1rem;
  margin: 1.5em 0 0.3em;
}

p {
  margin: 0.75em 0;
  color: var(--muted);
}

p.note {
  color: var(--muted);
  font-size: 0.86rem;
  margin-top: 0;
}

strong {
  color: var(--text);
  font-weight: 600;
}

article ul {
  margin: 0.7em 0;
  padding-left: 1.1em;
  list-style: none;
}

article li {
  position: relative;
  margin: 0.55em 0;
  color: var(--muted);
}

/* The bullet is the beam: a short juniper capsule, as the app draws one. */
article li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.72em;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

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

/* The front page */

.hero {
  padding: 8vh 0 6vh;
}

.hero h1 {
  font-size: 2.6rem;
  margin-top: 0;
}

.lede {
  font-size: 1.16rem;
  max-width: 34rem;
}

.badge {
  display: inline-block;
  margin: 1.6em 0 0;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
}

.links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 2.4em;
}

.links .link {
  color: var(--text);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--line);
  padding-bottom: 2px;
}

.links .link:hover,
.links .link:focus-visible {
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* The friend challenge invite, round 16 §3 (D-469, D-479). Follows prefers-color-scheme like the
   rest of the site; the card is the invite image, which is always dark. */

.invite {
  padding: 4vh 0 2vh;
}

.invite-wordmark {
  margin: 0 0 1.2em;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.invite-card {
  width: min(353px, 100%);
  aspect-ratio: 1;
  border-radius: 18px;
  padding: 28px 30px 22px;
  background: linear-gradient(rgba(150, 158, 168, 0.22), rgba(150, 158, 168, 0.1)), #0b0d0f;
  color: #f3f0e9;
  display: flex;
  flex-direction: column;
}

.invite-scale {
  width: 136px;
  height: auto;
  align-self: center;
}

.c-metal, .c-beam { fill: #7a828b; }
.c-wire { stroke: #7a828b; stroke-width: 1; fill: none; }
.c-ember { fill: var(--ember); }
.c-juniper { fill: var(--juniper); }

.invite-sentence {
  margin: 18px 0 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  flex: 1;
}

.invite-link {
  margin: 0;
  border-top: 2px solid rgba(0, 0, 0, 0.55);
  padding-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--juniper);
}

.invite-rule {
  margin: 1.2em 0 0;
  font-size: 20px;
  font-weight: 600;
}

.invite-state {
  margin: 0.6em 0 0;
  color: var(--muted);
}

.invite .store-badge {
  display: inline-block;
  margin-top: 1.4em;
}

.invite-note {
  margin-top: 1em;
  color: var(--muted);
  font-size: 15px;
  max-width: 34rem;
}

/* The foot */

footer {
  max-width: 44rem;
  margin: 0 auto;
  padding: 40px 22px 56px;
  border-top: 1px solid var(--line);
  margin-top: 48px;
  color: var(--muted);
  font-size: 0.88rem;
}

footer p {
  margin: 0.3em 0;
}

@media (max-width: 30rem) {
  body {
    font-size: 16px;
  }
  .hero h1 {
    font-size: 2.1rem;
  }
}

/* The help page: one <details> per question. The browser does the opening and the closing, so there
   is no script and a question a reader has opened can be printed or linked. See D-303. */

details {
  border-top: 1px solid var(--line);
  padding: 2px 0;
}

details:last-of-type {
  border-bottom: 1px solid var(--line);
}

summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 30px 15px 0;
  position: relative;
  font-weight: 600;
  color: var(--text);
}

/* Safari draws its own triangle through `::-webkit-details-marker`; both are turned off so the
   chevron below is the only disclosure mark. */
summary::-webkit-details-marker,
summary::marker {
  display: none;
  content: "";
}

/* The chevron, drawn from two borders so there is no image and no font to load. */
summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 21px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

details[open] > summary::after {
  transform: rotate(45deg);
  border-color: var(--accent);
}

summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.answer {
  padding: 0 30px 14px 0;
}

.answer p:first-child {
  margin-top: 0;
}

.answer ul {
  margin: 0.7em 0;
  padding-left: 1.1em;
  list-style: none;
}

.answer li {
  position: relative;
  margin: 0.55em 0;
  color: var(--muted);
}

.answer li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.72em;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

/* The support form. The only thing on the site that posts, and the only way to reach us since
   D-305: there is no email address anywhere here. It works with JavaScript off. */

.contact {
  margin: 2.4em 0 0;
  padding-top: 1.6em;
  border-top: 1px solid var(--line);
}

.field {
  margin: 0 0 1.25em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
}

.optional {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85rem;
}

.hint {
  color: var(--muted);
  font-size: 0.85rem;
}

input[type="text"],
input[type="email"],
textarea {
  font: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  width: 100%;
  max-width: 30rem;
}

textarea {
  max-width: none;
  resize: vertical;
  line-height: 1.55;
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The honeypot. **Moved off screen rather than `display: none`**: some bots skip anything hidden,
   and the label tells a screen reader to leave it alone. */
.decoy {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}

button[type="submit"] {
  font: inherit;
  font-weight: 600;
  color: var(--page);
  background: var(--text);
  border: 0;
  border-radius: 14px;
  padding: 12px 22px;
  cursor: pointer;
}

button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: default;
}

.status {
  color: var(--muted);
  font-size: 0.9rem;
}

.status.sent {
  color: var(--accent);
}

.status.failed {
  color: var(--warn, #f68c53);
}

.cf-turnstile {
  margin: 0 0 1.25em;
}