/* Beta landing page.
   Branched from docs/mockups/workshopr-landing/shared.css, trimmed to the one
   concept that shipped (the workshop thread) and to a page that now wears the
   global header and footer — the mockup's own header, footer, and concept
   switcher are gone, as are concepts B and C. */

:root {  /* ds-lint-disable-line */
  --mock-max: 1240px;
  --mock-line: color-mix(in srgb, var(--color-ink) 14%, transparent);
  --mock-line-strong: color-mix(in srgb, var(--color-ink) 26%, transparent);
  --mock-red-wash: color-mix(in srgb, var(--mainsite-primary) 10%, var(--bg-page));
  --mock-red-field: color-mix(in srgb, var(--mainsite-primary) 88%, var(--color-ink));
}

.beta-page * {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.beta-page {
  margin: 0;
  color: var(--color-ink);
  background-color: var(--bg-page);
  background-image: var(--paper-grid-image);
  background-size: var(--paper-grid-size);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

.beta-page ::selection {
  color: var(--text-inverse);
  background: var(--mainsite-dark);
}

.beta-page main button,
.beta-page main a {
  -webkit-tap-highlight-color: transparent;
}

/* Zero specificity via :where(). This is a default for body links, and it has
   to lose to any component that sets its own colour — scoping it to
   `.beta-page main a` outranked .ws-btn--primary and painted the buttons'
   text and icons ink instead of white. */
:where(.beta-page main a) {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

.beta-page main a:focus-visible,
.beta-page main button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 var(--space-1) var(--focus-ring-halo);
}

.beta-page main img {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mock-shell {
  width: min(calc(100% - (var(--space-6) * 2)), var(--mock-max));
  margin-inline: auto;
}

.mock-hero {
  position: relative;
  min-height: min(860px, calc(100dvh - var(--space-16)));
  overflow: hidden;
  border-bottom: 1px solid var(--mock-line);
}

.mock-hero__inner {
  min-height: inherit;
  display: grid;
  align-items: center;
  gap: var(--space-16);
  padding-block: calc(var(--space-16) + var(--space-8));
}

.mock-hero__copy {
  position: relative;
  z-index: 2;
}

.mock-hero h1 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-display), 6vw, 5.5rem);
  font-weight: var(--font-semibold);
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}

.mock-hero h1 em {
  color: var(--color-primary-on-white);
  font-weight: var(--font-semibold);
  text-decoration: underline;
  text-decoration-color: var(--mainsite-light);
  text-decoration-thickness: var(--space-2);
  text-underline-offset: var(--space-1);
}

.mock-hero__lede {
  max-width: 62ch;
  margin: var(--space-6) 0 0;
  color: var(--color-ink-secondary);
  font-size: clamp(var(--text-body), 1.7vw, var(--text-h3));
  line-height: var(--leading-relaxed);
}

.mock-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.mock-actions .ws-btn {
  min-height: var(--space-12);
}

.mock-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

/* A row of notes under the hero buttons. The notes keep their own top margin
   when one stands alone; inside the row the container owns the spacing, so two
   of them sit on one line and wrap to two on a narrow screen rather than
   running into each other. */
.mock-notes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-6);
}

.mock-notes .mock-note {
  margin-top: 0;
}

.mock-note .material-symbols-outlined {
  color: var(--color-primary-on-white);
  font-size: var(--text-h4);
}

/* The "who is already here" note sits centred above the hero artifact rather
   than in the copy column, so it captions the run sheets. Larger than the
   standard note: it carries the hero's social proof, not fine print. */
.mock-note--visual {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-6);
  color: var(--color-ink-secondary);
  font-size: var(--text-h4);
  font-weight: var(--font-semibold);
}

.mock-note--visual .material-symbols-outlined {
  font-size: var(--icon-lg);
}

.mock-section {
  position: relative;
  padding-block: calc(var(--space-16) + var(--space-12));
  scroll-margin-top: calc(var(--space-16) + var(--space-4));
}

.mock-section--surface {
  border-block: 1px solid var(--mock-line);
  background: var(--bg-surface);
}

.mock-section--ink {
  color: var(--text-inverse);
  background: var(--color-ink);
  background-image:
    linear-gradient(color-mix(in srgb, var(--text-inverse) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text-inverse) 8%, transparent) 1px, transparent 1px);
  background-size: var(--paper-grid-size);
}

.mock-section__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 0.55fr);
  align-items: end;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}

.mock-section h2 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-h1), 4.5vw, 4.25rem);
  font-weight: var(--font-semibold);
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}

.mock-section__intro p {
  max-width: 68ch;
  margin: 0;
  color: var(--color-ink-secondary);
  font-size: var(--text-h4);
  line-height: var(--leading-relaxed);
}

.mock-section--ink .mock-section__intro p {
  color: color-mix(in srgb, var(--text-inverse) 76%, transparent);
}

.mock-lifecycle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--mock-line-strong);
}

.mock-lifecycle--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mock-lifecycle__step {
  position: relative;
  padding: var(--space-8) var(--space-8) var(--space-10);
}

.mock-lifecycle__step + .mock-lifecycle__step {
  border-left: 1px solid var(--mock-line-strong);
}

.mock-lifecycle__step::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: var(--space-1);
  background: var(--mainsite-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-spring);
}

.mock-lifecycle__step:hover::before,
.mock-lifecycle__step.is-active::before {
  transform: scaleX(1);
}

/* The same badge the stage tabs wear: a rounded square filled with
   --phase-learn-light, no border. It replaces a bordered circle on a very-light
   wash, which read as a different component for what is the same four phases
   named twice on one page. A square also gives a square glyph room the ring
   could not — the corners are no longer the closest thing to the edge, which is
   why this badge carries the tabs' 24px icon rather than a reduced one. */
.mock-lifecycle__icon {
  width: var(--space-10);
  height: var(--space-10);
  margin-bottom: var(--space-8);
  border-radius: var(--radius-lg);
  color: var(--phase-learn-dark);
  background: var(--phase-learn-light);
}

/* Everything the Material Symbols stylesheet also sets has to be stated here,
   on both classes.

   That stylesheet declares .material-symbols-outlined { display: inline-block;
   font-size: 24px; line-height: 1 } and the header loads a copy of it after
   this file, so any single-class rule here ties on specificity and loses on
   order. .mock-lifecycle__icon's `display: grid` and `place-items: center` were
   being dropped on the floor: the badge was never centring anything, and the
   glyph sat where inline text happened to land — which is what made the icons
   look broken inside their circles. The other icon rules in this file are all
   two-class for the same reason.

   An icon token, not a type token: --text-* are rem-based and the platform sets
   html { font-size: 80% }, so --text-h3 lands at 16px rather than the 20px its
   name implies. --icon-* are absolute px and mean what they say. */
.mock-lifecycle__icon.material-symbols-outlined {
  display: grid;
  place-items: center;
  font-size: var(--icon-lg);
  line-height: 1;
}

.mock-lifecycle h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h2);
}

.mock-lifecycle p {
  max-width: 34ch;
  margin: var(--space-3) 0 0;
  color: var(--color-ink-secondary);
  line-height: var(--leading-relaxed);
}

.mock-quote {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--space-12);
}

.mock-quote::before {
  content: '“';
  position: absolute;
  top: calc(var(--space-10) * -1);
  left: 0;
  color: var(--phase-learn-dark);
  font-family: var(--font-heading);
  font-size: 9rem;
  line-height: 1;
}

.mock-quote blockquote {
  position: relative;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-h2), 3.2vw, 3.25rem);
  font-weight: var(--font-medium);
  letter-spacing: -0.025em;
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.mock-quote figcaption {
  margin-top: var(--space-6);
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

.mock-quotes {
  max-width: 1040px;
  margin-inline: auto;
}

.mock-quotes__viewport {
  padding-top: var(--space-10);
  overflow: hidden;
}

.mock-quotes__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  align-items: start;
  transition: transform var(--duration-slow) var(--ease-out);
}

.mock-quotes .mock-quote {
  max-width: none;
}

.mock-quotes__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.mock-quotes__arrow {
  display: grid;
  place-items: center;
  width: var(--space-12);
  height: var(--space-12);
  padding: 0;
  border: 1px solid var(--mock-line-strong);
  border-radius: var(--radius-full);
  color: var(--phase-learn-dark);
  background: var(--bg-surface);
  cursor: pointer;
}

.mock-quotes__arrow:hover {
  border-color: var(--phase-learn-dark);
  background: var(--phase-learn-very-light);
}

.mock-quotes__arrow .material-symbols-outlined {
  font-size: var(--icon-lg);
}

.mock-quotes__dots {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mock-quotes__dot {
  width: var(--space-3);
  height: var(--space-3);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--phase-learn-light);
  cursor: pointer;
  transition: background var(--duration-fast) linear;
}

.mock-quotes__dot[aria-selected='true'] {
  width: var(--space-8);
  background: var(--phase-learn-dark);
}

@media (prefers-reduced-motion: reduce) {
  .mock-quotes__track,
  .mock-quotes__dot {
    transition: none;
  }
}

.mock-paths {
  border-top: 1px solid var(--mock-line-strong);
}

.mock-path {
  display: grid;
  grid-template-columns: minmax(14rem, 0.45fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-8);
  min-height: calc(var(--space-16) + var(--space-8));
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--mock-line-strong);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out), transform var(--duration-slow) var(--ease-spring), background var(--duration-base) var(--ease-out);
}

.mock-path:hover {
  color: var(--color-primary-on-white);
  background: var(--mainsite-very-light);
  transform: translateX(var(--space-2));
}

.mock-path strong {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
}

.mock-path span:not(.material-symbols-outlined) {
  max-width: 56ch;
  color: var(--color-ink-secondary);
}

.mock-path .material-symbols-outlined {
  font-size: var(--text-h2);
}

.mock-final {
  padding-block: calc(var(--space-16) + var(--space-16));
  color: var(--text-inverse);
  background: var(--mock-red-field);
  scroll-margin-top: var(--space-16);
}

.mock-final__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-16);
}

.mock-final h2 {
  max-width: 13ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-h1), 5vw, 4.75rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}

.mock-final p {
  max-width: 54ch;
  margin: var(--space-6) 0 0;
  color: color-mix(in srgb, var(--text-inverse) 82%, transparent);
  font-size: var(--text-h4);
}

.mock-final .ws-btn--secondary {
  border-color: var(--text-inverse);
  color: var(--color-ink);
  background: var(--text-inverse);
}

.mock-reveal {
  opacity: 1;
  transform: translateY(0);
}

.js .mock-reveal {
  opacity: 0;
  transform: translateY(var(--space-5));
  transition:
    opacity var(--duration-reveal) var(--ease-reveal),
    transform var(--duration-reveal) var(--ease-reveal);
}

.js .mock-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Beta welcome page (signedin.php): a single block of copy, so the full
   860px hero centred it too low on the screen. A shorter hero, with the copy
   anchored to the top rather than centred, lifts it. */
.signedin-hero {
  min-height: min(640px, calc(100dvh - var(--space-16)));
}

.signedin-hero .mock-hero__inner {
  align-items: start;
  padding-block-start: var(--space-12);
}

.signedin-hero__shot {
  margin: var(--space-6) 0 0;
  overflow: hidden;
  border: 1px solid var(--mock-line-strong);
  border-radius: var(--radius-2xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
}

.signedin-hero__shot img {
  display: block;
  width: 100%;
}

/* The workshop thread */
.beta-page #workflow {
  padding-bottom: 0;
}

.beta-page #workflow + .mock-section {
  padding-top: var(--space-12);
}

.thread-hero {
  background: linear-gradient(104deg, var(--bg-page) 0 56%, var(--mock-red-wash) 56% 100%);
}

.thread-hero .mock-hero__inner {
  grid-template-columns: minmax(0, 0.82fr) minmax(28rem, 0.72fr);
}

.thread-hero-artifact {
  position: relative;
  isolation: isolate;
  width: min(82%, 27rem);
  aspect-ratio: 17 / 22;
  margin: 0 auto;
}

.thread-hero-artifact__page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: var(--space-2);
  border: 1px solid var(--mock-line-strong);
  border-radius: calc(var(--radius-2xl) + var(--space-2));
  object-fit: cover;
  background: var(--bg-surface);
}

.thread-hero-artifact__page--back {
  z-index: 0;
  box-shadow: var(--shadow-lg);
  transform: translate(-11%, 5%) rotate(-4deg);
}

.thread-hero-artifact__page--front {
  z-index: 1;
  box-shadow: var(--shadow-xl);
  transform: translate(6%, -1%) rotate(2deg);
}

.thread-record {
  position: relative;
  max-width: 860px;
  margin-inline: auto;
  padding: var(--space-5);
  /* The card is a white sheet inside the ink section, so it has to take its
     text colour back — inheriting leaves white type on a white card. */
  color: var(--color-ink);
  border: 1px solid var(--mock-line-strong);
  border-radius: var(--radius-2xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
}

.thread-record::before {
  content: '';
  position: absolute;
  inset: var(--space-4) auto var(--space-4) calc(var(--space-10) + var(--space-8));
  width: 1px;
  background: var(--mainsite-light);
}

.thread-record__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--mock-line);
}

.thread-record__top strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
}

.thread-record__top small {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-ink-muted);
}

.thread-record__status {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  color: var(--color-primary-on-white);
  background: var(--mainsite-very-light);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
}

.thread-record__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-12) 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--mock-line);
}

.thread-record__row:last-child {
  border-bottom: 0;
}

.thread-record__time {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
  font-size: var(--text-meta);
}

.thread-record__row strong {
  display: block;
  font-size: var(--text-small);
}

.thread-record__row small {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-ink-muted);
}

.thread-stage {
  display: grid;
  grid-template-columns: 0.62fr 1fr;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--mock-line-strong);
  border-radius: var(--radius-2xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}

.thread-stage__nav {
  padding: var(--space-6);
  border-right: 1px solid var(--mock-line-strong);
  background: var(--bg-muted);
}

.thread-stage__nav button {
  display: grid;
  grid-template-columns: var(--space-10) 1fr;
  column-gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--mock-line);
  color: var(--color-ink-secondary);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.thread-stage__nav button[aria-selected='true'] {
  color: var(--color-ink);
  background: var(--bg-surface);
}

.thread-stage__nav strong,
.thread-stage__nav span {
  display: block;
}

.thread-stage__nav .material-symbols-outlined {
  display: grid;
  place-items: center;
  align-self: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-lg);
  color: var(--phase-learn-dark);
  background: var(--phase-learn-light);
  font-size: var(--icon-lg);
}

.thread-stage__nav strong {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.thread-stage__nav span {
  margin-top: var(--space-1);
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
}

.thread-stage__view {
  position: relative;
  padding: var(--space-8);
}

.thread-panel[hidden] {
  display: none;
}

.thread-panel h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h1);
}

.thread-panel > p {
  max-width: 52ch;
  color: var(--color-ink-secondary);
}

.thread-panel__artifact {
  margin-top: var(--space-8);
  overflow: hidden;
  border: 1px solid var(--mock-line-strong);
  border-radius: var(--radius-xl);
  background: var(--bg-page);
}

.thread-panel__artifact img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
}

.thread-panel__note {
  padding: var(--space-4);
  border-top: 1px solid var(--mock-line);
  color: var(--color-ink-secondary);
  font-size: var(--text-small);
}

@media (max-width: 980px) {
  .thread-hero {
    background-position: center;
  }

  .thread-hero .mock-hero__inner {
    grid-template-columns: 1fr;
  }

  .mock-hero__visual {
    width: min(100%, 680px);
    margin-inline: auto;
  }

  .thread-hero-artifact {
    transform: none;
  }

  .mock-section__intro,
  .mock-final__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .mock-shell {
    width: min(calc(100% - (var(--space-4) * 2)), var(--mock-max));
  }

  .mock-hero {
    min-height: auto;
  }

  .mock-hero__inner {
    gap: var(--space-10);
    padding-block: var(--space-12) var(--space-16);
  }

  .thread-hero-artifact {
    width: min(84%, 25rem);
  }

  .thread-hero-artifact__page--back {
    transform: translate(-8%, 4%) rotate(-3deg);
  }

  .thread-hero-artifact__page--front {
    transform: translate(5%, -1%) rotate(1.5deg);
  }

  .mock-hero h1 {
    font-size: clamp(3.25rem, 14vw, 4.75rem);
  }

  .mock-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .mock-actions .ws-btn {
    justify-content: center;
    width: 100%;
  }

  .mock-section {
    padding-block: var(--space-16);
  }

  .mock-section__intro {
    gap: var(--space-6);
    margin-bottom: var(--space-10);
  }

  .mock-lifecycle {
    grid-template-columns: 1fr;
  }

  .mock-lifecycle__step + .mock-lifecycle__step {
    border-top: 1px solid var(--mock-line-strong);
    border-left: 0;
  }

  .mock-path {
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
  }

  .mock-path span:not(.material-symbols-outlined) {
    grid-column: 1 / -1;
  }

  .mock-quote {
    padding-inline: var(--space-4);
  }

  .mock-final {
    padding-block: var(--space-16);
  }

  .thread-stage {
    grid-template-columns: 1fr;
  }

  .thread-stage__nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--mock-line-strong);
  }

  .thread-stage__nav button {
    display: block;
    padding: var(--space-3);
    border-right: 0;
    border-bottom: 1px solid var(--mock-line);
  }

  .thread-stage__nav button:nth-child(odd) {
    border-right: 1px solid var(--mock-line);
  }

  .thread-stage__nav button:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .thread-stage__nav button > span:first-child {
    display: none;
  }

  .thread-stage__view {
    padding: var(--space-5);
  }
}

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

  .beta-page main *,
  .beta-page main *::before,
  .beta-page main *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .js .mock-reveal {
    opacity: 1;
    transform: none;
  }
}