/* PathMX Labs: PathMX's synthwave palette, a workshop heading face, and room to read. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("./assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
/* Signature styles for Builders Club offers; each loads only where a signature uses it. */
@font-face {
  font-family: "Mr Dafoe";
  src: url("./assets/fonts/mr-dafoe-latin.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Herr Von Muellerhoff";
  src: url("./assets/fonts/herr-von-muellerhoff-latin.woff2") format("woff2");
  font-display: swap;
}

:root {
  --labs-stripes: linear-gradient(90deg, light-dark(#6755e8, #53d9ed), light-dark(#9467ea, #8195ef) 35%, light-dark(#d560ca, #c463e2) 70%, light-dark(#eb55ab, #e852be));
  --labs-sheet: light-dark(#fffdf9, #1b1f3a);
  --labs-shadow: 0 1px 2px rgb(24 42 85 / 0.06), 0 12px 32px -12px rgb(24 42 85 / 0.18);
  --labs-frame: 42rem;
  /* A darker, quieter navy than synthwave's, so the cards and token stand out. */
  --pmx-color-bg: light-dark(#f6f3eb, #0f1221);

  --pmx-font-heading: "Bricolage Grotesque", var(--pmx-font-body);
  --pmx-document-measure: none;
  --pmx-prose-size: 1.0625rem;
  --pmx-prose-leading: 1.65;
  --pmx-prose-gutter: 0;
  --pmx-radius: 0.875rem;
}
:root:has(#program-card, #membership) { --labs-frame: 60rem; }

body { margin: 0; background: var(--pmx-color-bg); color: var(--pmx-color-fg); }
:focus-visible { outline: 2px solid var(--pmx-color-focus); outline-offset: 2px; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 20; padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--labs-sheet); }
.skip-link:focus { top: 0.5rem; }

/* Frame */
.labs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.6rem max(1rem, calc((100% - var(--labs-frame)) / 2 + 1rem));
  padding-top: calc(0.6rem + 3px);
  background: var(--labs-stripes) top / 100% 3px no-repeat;
  border-bottom: 1px solid var(--pmx-color-border);
}
.labs-brand { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; color: var(--pmx-color-fg); text-decoration: none; }
/* The PathMX logotype in two layers: "Path" is a mask filled in the page's own scheme,
   so it follows the light/dark switch in every browser; the gradient M and X are an
   image, the same in both. `scripts/logotype.py` draws them on one shared box. */
.labs-logo { position: relative; display: block; height: 1.3rem; aspect-ratio: 4.9071; }
.labs-logo__ink { position: absolute; inset: 0; background: light-dark(#182a55, #f5f0e7); -webkit-mask: url("./assets/pathmx-ink.svg") center / contain no-repeat; mask: url("./assets/pathmx-ink.svg") center / contain no-repeat; }
.labs-logo__mx { position: absolute; inset: 0; width: 100%; height: 100%; }
/* "Labs" is a small embroidered patch from the same set as the club badge: a stitched pill
   with a gradient border and foil lettering, dark in either scheme. It tilts and catches
   the light with the badge's `data-holo` script. */
.labs-patch {
  --tilt-x: 0;
  --tilt-y: 0;
  --shine: 0.35;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.75rem;
  padding: 0 0.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#161a33, #161a33) padding-box, linear-gradient(115deg, #53d9ed, #8195ef 35%, #c463e2 70%, #e852be) border-box;
  box-shadow: 0 2px 6px -1px rgb(12 16 40 / 0.45);
  transform: perspective(12rem) rotateX(calc(var(--tilt-y) * -14deg)) rotateY(calc(var(--tilt-x) * 14deg));
}
.labs-patch::before { content: ""; position: absolute; inset: 2px; border: 1px dashed rgb(245 240 231 / 0.4); border-radius: inherit; }
.labs-patch::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='1' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 11 -7.6'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url%28%23g%29'/%3E%3C/svg%3E") center / 3rem,
    linear-gradient(115deg, transparent 28%, rgb(232 82 190 / 0.85) 36%, rgb(255 179 230 / 0.9) 41%, rgb(159 243 255 / 0.9) 47%, rgb(83 217 237 / 0.85) 52%, rgb(129 149 239 / 0.85) 57%, transparent 65%) calc(50% + var(--tilt-x) * 60%) calc(50% + var(--tilt-y) * 60%) / 250% 250%;
  mix-blend-mode: color-dodge;
  opacity: calc(0.06 + var(--shine) * 0.4);
  pointer-events: none;
}
.labs-patch__text {
  font: 800 0.78rem/1 var(--pmx-font-heading);
  letter-spacing: 0.22em;
  margin-right: -0.22em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(105deg, #fff8ec 28%, #9ff3ff 40%, #fff8ec 50%, #ffb3e6 60%, #fff8ec 72%) calc(50% + var(--tilt-x) * 70%) 50% / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}
.labs-patch__spark { width: 0.45rem; height: 0.45rem; fill: #53d9ed; }
.labs-patch__spark:last-child { fill: #e852be; }
@media (prefers-reduced-motion: reduce) { .labs-patch { transform: none; } }
/* Auth's menu links are full width plus padding without border-box sizing, so their
   hover ran past the menu; buttons were already border-box. Fixed here until Auth is. */
.labs-header .pmx-auth__menu a { box-sizing: border-box; }
/* On a phone the account button shows only its avatar; the menu still names the Home. */
@media (max-width: 30rem) {
  .labs-header .pmx-auth__identity > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.labs-main { box-sizing: border-box; max-width: var(--labs-frame); margin: 0 auto; padding: clamp(2rem, 6vw, 3.5rem) 1rem 6rem; }

/* Reading */
.labs-main .pmx-document > [data-pmx-block] + [data-pmx-block] { margin-top: 2.75rem; }
.labs-main :is(h1, h2, h3) { font-family: var(--pmx-font-heading); color: var(--pmx-color-fg); text-wrap: balance; }
.labs-main h1 { font-size: clamp(2.25rem, 7vw, 3.5rem); font-weight: 750; line-height: 1.02; letter-spacing: -0.04em; }
.labs-main h2 { font-size: clamp(1.4rem, 3.4vw, 1.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; }
.labs-main h2::before { content: ""; display: block; width: 2.25rem; height: 4px; margin-bottom: 0.85rem; border-radius: 2px; background: var(--labs-stripes); }
.labs-main h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.labs-main .pmx-heading.level-h1 { margin-block-end: 1.25rem; }
.labs-main .pmx-heading.level-h2 { margin-block: 2.5rem 0.9rem; }
.labs-main .pmx-heading.level-h3 { margin-block: 1.75rem 0.5rem; }
.labs-main [data-pmx-block] > .pmx-heading:first-child { margin-block-start: 0; }
.labs-main .pmx-heading.level-h3 + :is(ul, ol, p) { margin-block-start: 0; }
.labs-main .level-h1 + p { font-size: clamp(1.15rem, 2.8vw, 1.35rem); line-height: 1.45; letter-spacing: -0.005em; text-wrap: pretty; }
.labs-main p { text-wrap: pretty; }
.labs-main a { color: var(--pmx-color-link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.labs-main a:hover { text-decoration-thickness: 2px; }
.labs-main a.pmx-button { color: var(--pmx-color-on-accent); text-decoration: none; }
.labs-main strong { font-weight: 650; }
.labs-main li::marker { color: var(--pmx-color-accent); }
.labs-main li + li { margin-top: 0.7rem; }
.labs-main .club-badges__list > li + li { margin-top: 0; }
.labs-main .offer-backstage > li + li { margin-top: 0; }
.labs-main .terms__list > li + li { margin-top: 0; }

/* A sheet stands on its own; it needs no rule above it. */
.labs-main .pmx-document > [data-pmx-block]:has(+ :is(#program-card, #membership, #acceptance)) { padding-block-end: 0; border-block-end: 0; }
.labs-main :is(input, select, textarea):not([type=checkbox], [type=radio]) { background: var(--pmx-color-bg); }

/* A sheet: the program card, an acceptance, a sign-in form. */
.labs-main :is(#program-card, #membership, #acceptance, .pmx-auth:not(.pmx-auth--session)) {
  position: relative;
  box-sizing: border-box;
  padding: clamp(1.25rem, 4.5vw, 2.25rem);
  border: 1px solid var(--pmx-color-border);
  border-radius: 1.25rem;
  background: var(--labs-sheet);
  box-shadow: var(--labs-shadow);
}
/* Its stripe is a lit rim: the top edge itself, curving round the corners and thinning
   to nothing down the sides. Only the band between the outer edge and a box 4px lower
   is painted, so it always matches the corner radius. */
.labs-main :is(#program-card, #membership, #acceptance, .pmx-auth:not(.pmx-auth--session))::before {
  content: "";
  position: absolute;
  inset: -1px;
  box-sizing: border-box;
  padding-top: 4px;
  border-radius: inherit;
  background: var(--labs-stripes);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.labs-main :is(#program-card, #membership, #acceptance) h2::before { display: none; }
.labs-main :is(#program-card, #membership, #acceptance) .pmx-heading.level-h2:first-child { margin-block-start: 0; }

/* The membership card: it opens the home page, and each offer shows the builder theirs.
   The member token sits on its top edge; what we give sits beside what you give, row for
   row, and pointing at a side turns the token to that side's face. */
.labs-main :is(#program-card, #membership) {
  --offer-token-size: clamp(8.5rem, 20vw, 11rem);
  margin-top: calc(var(--offer-token-size) / 2);
  padding-top: calc(var(--offer-token-size) / 2 + 0.75rem);
  /* A soft surface: light falling from the token, a top highlight, and a smooth shadow. */
  background:
    radial-gradient(70% 45% at 50% 0%, color-mix(in oklch, #c463e2 14%, transparent), transparent 70%),
    linear-gradient(color-mix(in oklch, var(--labs-sheet) 92%, white), var(--labs-sheet) 35%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 14%, transparent),
    0 1px 2px rgb(24 42 85 / 0.08),
    0 24px 48px -24px rgb(24 42 85 / 0.35);
}
.labs-main :is(#program-card, #membership) > .offer-token { position: absolute; top: calc(var(--offer-token-size) / -2); left: 50%; z-index: 2; margin-left: calc(var(--offer-token-size) / -2); }
/* Under the token, a title and a short paragraph open the card: the club's on the home
   page, the invitation on an offer. */
.labs-main :is(#program-card, #membership) .pmx-heading.level-h1 { margin-block: 0 0.85rem; font-size: clamp(2rem, 5.5vw, 3rem); text-align: center; }
.labs-main :is(#program-card, #membership) .level-h1 ~ p { max-width: 34rem; margin: 0 auto 0.75rem; font-size: clamp(1.05rem, 2.4vw, 1.2rem); text-align: center; color: var(--pmx-color-muted); }
.labs-main :is(#program-card, #membership) .level-h1 ~ p:last-of-type { margin-bottom: 2.25rem; }
/* What we give and what you give: two equal panels with a gap between them, their
   rows aligned across the seam (subgrid), and the seam drawn down the middle. */
.terms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(var(--terms-rows, 5), auto);
  column-gap: 1.5rem;
  background: linear-gradient(90deg, transparent calc(50% - 0.5px), var(--pmx-color-border) 0 calc(50% + 0.5px), transparent 0);
}
.terms__side { display: grid; grid-row: span var(--terms-rows, 5); grid-template-rows: subgrid; border-radius: 0.9rem; transition: background-color 250ms ease; }
.terms__list { display: contents; }
.labs-main .terms__title { margin: 0; padding: 0.85rem 1.25rem 0.6rem; border-bottom: 1px solid var(--pmx-color-border); font: 700 1.1rem/1.2 var(--pmx-font-heading); color: var(--pmx-color-accent); }
.labs-main .terms__title::before { display: none; }
.terms__item { padding: 0.95rem 1.25rem; border-bottom: 1px solid var(--pmx-color-border); }
.terms__item:last-child { border-bottom: 0; }
.terms__item dt { margin-bottom: 0.2rem; font: 700 1.05rem/1.3 var(--pmx-font-heading); letter-spacing: -0.01em; color: var(--pmx-color-fg); }
.terms__item dd { margin: 0; font-size: 0.95rem; line-height: 1.5; text-wrap: pretty; color: var(--pmx-color-muted); }
/* Pointing at a side lights its panel; the token's script turns to match
   (holo.client.ts), and the light follows the token so it never blinks at the seam. */
@media (hover: hover) {
  :is(#program-card, #membership):has(.terms:hover):has(.offer-token[data-face="lab"]) .terms__side[data-side="lab"],
  :is(#program-card, #membership):has(.terms:hover):has(.offer-token[data-face="builder"]) .terms__side[data-side="builder"] { background-color: color-mix(in oklch, var(--pmx-color-accent) 8%, transparent); }
}
/* The protections hold both sides together. */
/* Apply closes the card. It stays disabled while membership is by invitation. */
.contract-apply { margin: 2.25rem 0 0; text-align: center; }
.labs-main .contract-apply .pmx-button { min-width: min(100%, 16rem); padding: 1rem 2.75rem; border: 0; border-radius: 999px; color: #141833; background: linear-gradient(135deg, #53d9ed, #8195ef 35%, #c463e2 70%, #e852be); font-size: 1.15rem; font-weight: 750; }
.labs-main .contract-apply .pmx-button:hover:not(:disabled) { filter: brightness(1.08); }
.labs-main .contract-apply .pmx-button:disabled { opacity: 0.45; filter: saturate(0.6); cursor: not-allowed; }
.labs-main .contract-apply p { margin: 0.75rem 0 0; font-size: 0.95rem; color: var(--pmx-color-muted); }
/* On a phone the two sides stack: everything we give, then everything you give. */
@media (max-width: 40rem) {
  .terms { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1rem; background: none; }
  .terms__side { grid-row: auto; grid-template-rows: none; }
}

/* Questions: one row per question; a row opens to its answer, smoothly where the
   browser can animate to the answer's height. */
.faq { --faq-gap: 1.1rem; border-top: 1px solid var(--pmx-color-border); interpolate-size: allow-keywords; }
.faq__item { border-bottom: 1px solid var(--pmx-color-border); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--faq-gap) 0.25rem;
  font: 650 1.1rem/1.3 var(--pmx-font-heading);
  letter-spacing: -0.01em;
  color: var(--pmx-color-fg);
  list-style: none;
  cursor: pointer;
  transition: color 150ms ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--pmx-color-accent); }
.faq__item summary:focus-visible { outline-offset: -2px; border-radius: 0.5rem; }
/* A plus that turns into a cross when open. */
.faq__item summary::after {
  content: "";
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  background: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 100% no-repeat;
  color: var(--pmx-color-accent);
  transition: transform 250ms ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item::details-content { height: 0; overflow: clip; transition: height 250ms ease, content-visibility 250ms allow-discrete; }
.faq__item[open]::details-content { height: auto; }
.faq__answer { max-width: 42rem; padding: 0 0.25rem var(--faq-gap); color: var(--pmx-color-muted); }
.labs-main .faq__answer > p { margin: 0; }
.labs-main .faq__answer > p + p { margin-top: 0.6rem; }
@media (prefers-reduced-motion: reduce) { .faq__item::details-content, .faq__item summary::after { transition: none; } }
/* While a question is edited it stays open, so its toggle mark would read as a second remove. */
.faq__item[data-studio-item] summary::after { content: none; }
.faq__item > .studio-tools { top: 0.75rem; right: 0.25rem; }

.labs-main .offer-member { margin-block: 0.5rem 2rem; }

/* Offer: once signed, the certificate's welcome replaces the Block's heading. */
.labs-main [data-pmx-block]:has(.offer-certificate:not([hidden])) .pmx-heading { display: none; }
.offer-status { padding: 0.85rem 1rem; border-radius: 0.75rem; border: 1px solid color-mix(in oklch, var(--pmx-color-accent) 35%, transparent); background: color-mix(in oklch, var(--pmx-color-accent) 9%, var(--labs-sheet)); }
#acceptance .input-option { margin-block: 1rem; background: var(--pmx-color-bg); }
#acceptance .input-submit .pmx-button { min-width: 11rem; }

/* Sign-in */
.pmx-document:has(.pmx-auth:not(.pmx-auth--session)) { max-width: 28rem; margin-inline: auto; }
.labs-main .pmx-auth:not(.pmx-auth--session) { max-width: none; }
.labs-main .pmx-auth__code-entry summary { color: var(--pmx-color-muted); }