/* /connect/: the page behind the Synexas QR code. A standalone link page on the Landing V4 palette
   and type (DESIGN.md), without the marketing header, menu or footer. Dark first; a saved light
   choice is honoured through the same data-theme attribute as the contact cards, with no switch. */
:root {
  color-scheme: dark;
  --connect-paper: #0a0d14;
  --connect-surface: #10141d;
  --connect-ink: #f4f4f5;
  --connect-sub: #d2d5db;
  --connect-second: #c6cad1;
  --connect-body: #b9bcc4;
  --connect-muted: #a7abb4;
  --connect-eyebrow: #7fabff;
  --connect-accent: #4aa3ff;
  --connect-rule: #1e2330;
  --connect-rule-strong: #2e3443;
}

:root[data-theme='light'] {
  color-scheme: light;
  --connect-paper: #f5f4f0;
  --connect-surface: #ffffff;
  --connect-ink: #141414;
  --connect-sub: #2b2b27;
  --connect-second: #343330;
  --connect-body: #3f3e3b;
  --connect-muted: #4e4d49;
  --connect-eyebrow: #004cb2;
  --connect-accent: #004cb2;
  --connect-rule: #dedcd5;
  --connect-rule-strong: #c9c7bf;
}

html:has(body[data-page='connect']) {
  background: var(--connect-paper);
  overflow-x: clip;
}

body[data-page='connect'] {
  margin: 0;
  background: var(--connect-paper);
  color: var(--connect-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

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

.connect-shell {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: max(40px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(48px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

/* The language selector (locale.css; Percy, October 8, 2026) at the page's top right: a row of its
   own above the content on a phone, the corner level with the content's right edge from 880 px. It
   takes the page's palette, and without JavaScript neither it nor its row is shown. */
.connect-shell {
  position: relative;
}

.connect-top {
  --locale-ink: var(--connect-ink);
  --locale-sub: var(--connect-sub);
  --locale-muted: var(--connect-muted);
  --locale-rule: var(--connect-rule-strong);
  --locale-surface: var(--connect-surface);
  --locale-panel: var(--connect-surface);
  --locale-hover: var(--connect-rule);
  --locale-accent: var(--connect-accent);
  display: flex;
  justify-content: flex-end;
  width: min(100%, 560px);
  margin: 0 auto 24px;
}

:root[data-theme='light'] .connect-top {
  --locale-shadow: 0 10px 28px rgb(20 20 20 / 0.12);
}

html:not([data-locale-ready]) .connect-top {
  display: none;
}

@media (max-width: 879px) {
  html[data-locale-ready] .connect-shell {
    padding-top: max(16px, env(safe-area-inset-top));
  }
}

.connect-main {
  width: min(100%, 560px);
  min-width: 0;
  margin-inline: auto;
  display: grid;
  gap: 40px;
}

.connect-intro,
.connect-links,
.connect-group,
.connect-share {
  min-width: 0;
}

.connect-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 400 13px / 1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--connect-eyebrow);
}

.connect-mark {
  width: 18px;
  height: 18px;
  flex: none;
}

.connect-intro h1 {
  margin: 24px 0 0;
  font: 500 clamp(40px, 4.4vw, 60px) / 1.05 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--connect-ink);
}

.connect-intro h1 em {
  font-style: normal;
  color: var(--connect-second);
}

.connect-lead {
  max-width: 34ch;
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--connect-sub);
  text-wrap: pretty;
}

.connect-links {
  display: grid;
  gap: 40px;
}

.connect-label {
  margin: 0;
  font: 400 13px / 1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--connect-muted);
}

.connect-note {
  max-width: 44ch;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--connect-body);
  text-wrap: balance;
}

.connect-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.connect-list > li {
  margin: 0;
  border-top: 1px solid var(--connect-rule);
}

.connect-list > li:last-child {
  border-bottom: 1px solid var(--connect-rule);
}

/* The row's own padding reaches 12px past the text on each side, so the hover surface frames the
   text without the hairlines or the text leaving the column's edge. */
.connect-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  column-gap: 16px;
  min-height: 72px;
  margin-inline: -12px;
  padding: 14px 12px;
  color: var(--connect-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-feedback) var(--ease-out);
}

.connect-tile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--connect-rule-strong);
  border-radius: 50%;
  color: var(--connect-muted);
}

.connect-tile svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.connect-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
}

.connect-text {
  min-width: 0;
}

.connect-name {
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--connect-ink);
  overflow-wrap: break-word;
}

.connect-meta {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--connect-muted);
}

.connect-go {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--connect-muted);
  transition:
    transform var(--dur-feedback) var(--ease-out),
    color var(--dur-feedback) var(--ease-out);
}

.connect-go svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.connect-row:hover,
.connect-row:active {
  background: var(--connect-surface);
}

.connect-row:hover .connect-go {
  color: var(--connect-accent);
}

.connect-row:hover .connect-go-external {
  transform: translate(2px, -2px);
}

.connect-row:hover .connect-go-forward {
  transform: translateX(2px);
}

.connect-row:hover .connect-go-download {
  transform: translateY(2px);
}

.connect-row:focus-visible {
  outline: 2px solid var(--connect-accent);
  outline-offset: -2px;
  background: var(--connect-surface);
}

.connect-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The code is the built SVG with its own white quiet zone, so it is never tinted or inverted:
   white on the dark page, with a hairline ring in the light appearance. Its size is in its markup
   (width and height), a whole number of pixels to each module (246px for /connect/, 225px for a
   personal page; connect-qr.mjs connectCodeScale), so the stylesheet only keeps it inside a
   narrow window. */
.connect-code {
  margin: 16px 0 0;
}

.connect-code-image {
  display: block;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  background: #ffffff;
}

:root[data-theme='light'] .connect-code-image {
  box-shadow: 0 0 0 1px var(--connect-rule-strong);
}

.connect-code figcaption {
  margin-top: 12px;
  font: 400 14px / 1.4 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--connect-muted);
}

/* Chinese (Percy, October 8, 2026). Geist has no Chinese, so Chinese text takes the system's Chinese
   face (the Wiki's stack) while its Latin letters and figures stay in Geist, and it drops the tight
   heading and wide label tracking that Latin type uses. */
.connect-shell :lang(zh) {
  font-family:
    Geist,
    -apple-system,
    BlinkMacSystemFont,
    'PingFang SC',
    'Microsoft YaHei',
    sans-serif;
  letter-spacing: 0;
}

.connect-label :lang(zh),
.connect-eyebrow :lang(zh) {
  letter-spacing: 0.08em;
}

@media (min-width: 880px) {
  .connect-shell {
    padding-block: 48px;
  }

  .connect-top {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    right: calc(max(24px, env(safe-area-inset-right)) + max(0px, (100% - 1128px) / 2));
    z-index: 2;
    width: auto;
    margin: 0;
  }

  .connect-main {
    width: min(100%, 1080px);
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas:
      'intro links'
      'share links';
    column-gap: clamp(56px, 7vw, 112px);
    align-items: center;
  }

  /* The heading, the lead and the code form the left column; the links stay on the right and span
     both rows, so the page keeps the height of its longest list. */
  .connect-intro {
    grid-area: intro;
    align-self: end;
  }

  .connect-links {
    grid-area: links;
  }

  .connect-share {
    grid-area: share;
    align-self: start;
  }

  .connect-row {
    min-height: 68px;
    padding-block: 12px;
  }

  .connect-lead {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .connect-row,
  .connect-go {
    transition: none;
  }

  .connect-row:hover .connect-go {
    transform: none;
  }
}