/* =====================================================================
   public/css/platformSignup.css - self-serve signup on the platform apex
   ---------------------------------------------------------------------
   Loaded after tokens.css and auth.css. auth.css is the shared auth
   surface (card, fields, button, alerts); this file holds only what the
   signup pages add: the top bar and footer, the progress rail, the
   confirmed-email chip, the workspace-address preview and its "change"
   disclosure, the tucked-away discount code, the agreement checkbox, the
   code input, the link-style buttons, and the legal pages' prose.
   Prefix: .wks-* (walkable signup).

   Craft notes: borders ride box-shadows so nothing shifts on hover
   (interface-craft), figures are tabular, every transition is
   interruptible (plain CSS transitions on the same property), reduced
   motion turns motion off.
   ===================================================================== */

.wks-auth .auth-card { max-width: 480px; }
.wks-auth .auth-card--wide { max-width: 720px; }

/* ─── Shell: top bar, card, footer ────────────────────────────────── */
.wks-auth { display: flex; flex-direction: column; min-height: 100vh; }
.wks-skip {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--brand-surface);
  color: var(--fg-1);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--border-subtle), var(--shadow-md);
  transition: top var(--dur-fast) var(--ease-out);
}
.wks-skip:focus-visible { top: 12px; outline: none; }

.wks-bar { flex: 0 0 auto; }
.wks-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 clamp(16px, 4vw, 32px);
}
.wks-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.wks-brand:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-primary-soft); }
.wks-brand__svg { display: block; height: 28px; width: auto; aspect-ratio: 196 / 44; }
.wks-bar__link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  margin-right: -12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.wks-bar__link:hover { color: var(--fg-1); background: rgba(22, 24, 29, 0.05); }
.wks-bar__link:active { background: rgba(22, 24, 29, 0.08); }
.wks-bar__link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-primary-soft); }

/* The shared shell centres one card in the viewport; with a bar above
   and a footer below, it becomes a column that starts a little above
   centre (the card reads as anchored, not floating) and keeps the
   footer with the card. */
.wks-auth .auth-shell {
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  gap: var(--space-5);
  padding: clamp(4px, 4vh, 40px) var(--space-4) var(--space-8);
}

.wks-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  width: 100%;
  max-width: 480px;
  padding: 0 4px;
  font-size: var(--fs-small);
  color: var(--fg-3);
}
.wks-auth .auth-card--wide + .wks-foot { max-width: 720px; }
.wks-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 4px;
  margin: 0 -4px;
  border-radius: var(--radius-xs);
  color: var(--fg-3);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.wks-foot a:hover { color: var(--fg-1); }
.wks-foot a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-primary-soft); }
.wks-foot__back { font-weight: 600; }
.wks-foot__back svg { flex: 0 0 auto; transition: transform var(--dur-fast) var(--ease-out); }
.wks-foot__back:hover svg { transform: translateX(-2px); }
.wks-foot__links { display: flex; align-items: center; gap: 4px 16px; }

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

/* ─── Progress rail ───────────────────────────────────────────────── */
/* "Step 1 of 3" and three segments. Done and current segments are the
   brand colour (the rail reads as filled up to here), the rest neutral.
   The current segment fills in from the left on arrival, once; it is
   the only motion on the page and it says "you moved forward". */
.wks-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 var(--space-6);
}
.wks-progress__count {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.wks-progress__rail {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wks-progress__seg {
  position: relative;
  flex: 1 1 0;
  height: 4px;
  border-radius: 2px;
  background: var(--slate-200);
  overflow: hidden;
}
.wks-progress__seg.is-done { background: var(--brand-primary); }
.wks-progress__seg.is-current::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand-primary);
  transform-origin: left center;
  animation: wks-seg-fill 420ms var(--ease-out) both;
}
@keyframes wks-seg-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* The shared auth title is a 40px hero; inside a 480px card beside a
   progress rail it reads as a billboard. The signup steps use the
   28-30px that Linear, Vercel and Notion use for this screen. */
.wks-auth .auth-title { font-size: 30px; }

@media (max-width: 480px) {
  .wks-auth .auth-title { font-size: clamp(24px, 6.8vw, 30px); }
  .wks-foot { flex-direction: column; align-items: flex-start; }
}

/* ─── Confirmed email card (step 3) ───────────────────────────────── */
.wks-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: calc(-1 * var(--space-2)) 0 var(--space-5);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--brand-surface);
  box-shadow: inset 0 0 0 1px var(--border-subtle), var(--shadow-xs);
}
.wks-identity__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.wks-identity__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.2;
}
.wks-identity__email {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--fg-1);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.wks-identity__change { flex: 0 0 auto; display: flex; align-self: center; margin-left: auto; }
/* A link-styled button that keeps a 32px hit area without adding height to
   the row: the padding is pulled back out with negative margins. */
.wks-identity__btn {
  appearance: none;
  border: 0;
  background: transparent;
  margin: -6px -8px -6px 0;
  padding: 6px 8px;
  min-height: 32px;
  border-radius: var(--radius-xs);
  font-family: var(--brand-font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  color: var(--fg-link);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.wks-identity__btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.wks-identity__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-primary-soft); }

/* ─── Fields ──────────────────────────────────────────────────────── */
.wks-form { gap: var(--space-5); }

.wks-auth .auth-fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 480px) { .wks-auth .auth-fields-2 { grid-template-columns: 1fr; } }

.wks-auth .auth-field-error {
  font-size: var(--fs-small);
  color: var(--status-danger-fg);
  font-weight: 500;
}

/* ─── Workspace address: preview + "change" disclosure ────────────── */
.wks-addr { display: flex; flex-direction: column; gap: 4px; }
/* Flex, not inline text: the gap between the lead-in and the address is a
   fixed 6px whatever whitespace the template emits, and on a phone the
   two stack with the address on its own line. */
.wks-addr__preview {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}
.wks-addr__host {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-1);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  transition: color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* Phones: the address takes its own line as one piece instead of breaking
   mid-word after the lead-in. */
@media (max-width: 480px) {
  .wks-addr__preview { flex-direction: column; align-items: flex-start; gap: 4px; }
}
.wks-addr__preview[data-state="success"] .wks-addr__host { box-shadow: inset 0 0 0 1px rgba(42, 106, 61, 0.45); }
.wks-addr__preview[data-state="error"] .wks-addr__host { color: var(--status-danger-fg); box-shadow: inset 0 0 0 1px rgba(156, 43, 34, 0.45); }
.wks-addr__preview[data-state="neutral"] .wks-addr__host { color: var(--fg-3); }

/* Native <details> dressed as a link; works without the script. */
.wks-addr__edit, .wks-more { display: flex; flex-direction: column; }
.wks-addr__summary, .wks-more__summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  list-style: none;
  min-height: 32px;
  padding: 4px 2px;
  margin: 0 -2px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--fg-link);
  cursor: pointer;
  user-select: none;
  transition: color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.wks-addr__summary::-webkit-details-marker, .wks-more__summary::-webkit-details-marker { display: none; }
.wks-addr__summary::before, .wks-more__summary::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(-1px, 0);
  transition: transform var(--dur-fast) var(--ease-out);
}
details[open] > .wks-addr__summary::before, details[open] > .wks-more__summary::before { transform: rotate(45deg) translate(-1px, -2px); }
.wks-addr__summary:hover, .wks-more__summary:hover { text-decoration: underline; text-underline-offset: 2px; }
.wks-addr__summary:focus-visible, .wks-more__summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-primary-soft); }
.wks-addr__field { margin-top: var(--space-2); }
.wks-more .wks-discount { margin-top: var(--space-2); }

.wks-slug {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  background: var(--brand-surface);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.wks-slug:hover { box-shadow: inset 0 0 0 1px var(--slate-300); }
.wks-slug:focus-within { box-shadow: inset 0 0 0 1px var(--border-strong), 0 0 0 3px var(--brand-primary-soft); }
.wks-slug.is-invalid { box-shadow: inset 0 0 0 1px rgba(156, 43, 34, 0.55), 0 0 0 3px rgba(156, 43, 34, 0.10); }
.wks-slug.is-valid { box-shadow: inset 0 0 0 1px rgba(42, 106, 61, 0.55), 0 0 0 3px rgba(42, 106, 61, 0.10); }
.wks-slug .auth-input.wks-slug__input {
  border: 0;
  box-shadow: none;
  background: transparent;
  min-width: 0;
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.01em;
}
.wks-slug .auth-input.wks-slug__input:focus { box-shadow: none; }
.wks-slug__suffix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-3);
  white-space: nowrap;
  user-select: none;
}

/* ─── Discount code ───────────────────────────────────────────────── */
.wks-discount__row { display: flex; gap: 8px; }
.wks-auth .auth-input.wks-discount__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wks-auth .auth-input.wks-discount__input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--brand-font-body); }
.wks-discount__btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand-surface);
  box-shadow: inset 0 0 0 1px var(--border-subtle), var(--shadow-xs);
  font-family: var(--brand-font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--fg-1);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.wks-discount__btn:hover { background: var(--paper-100); box-shadow: inset 0 0 0 1px var(--slate-300), var(--shadow-sm); }
.wks-discount__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--border-strong), 0 0 0 3px var(--brand-primary-soft); }

/* ─── Agreement ───────────────────────────────────────────────────── */
.wks-auth .auth-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--fg-2);
  line-height: 1.45;
  padding: 2px 0;
}
.wks-auth .auth-check input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--brand-primary);
  flex: 0 0 auto;
}
.wks-auth .auth-check a { color: var(--fg-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.wks-auth .auth-check.is-invalid { color: var(--status-danger-fg); }

.wks-fineprint {
  margin: calc(-1 * var(--space-2)) 0 0;
  font-size: 12px;
  color: var(--fg-3);
  line-height: var(--lh-normal);
  text-align: center;
}
.wks-fineprint a { color: var(--fg-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* The acceptance line that sits under the form on step 1 (outside the form's gap). */
.wks-fineprint--below { margin: var(--space-4) 0 0; }

/* ─── Verification code ───────────────────────────────────────────── */
.wks-auth .auth-input.wks-code {
  height: 56px;
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wks-auth .auth-input.wks-code::placeholder { letter-spacing: 0.32em; color: var(--slate-300); }

.wks-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  margin-top: var(--space-4);
}
.wks-actions + .wks-actions { margin-top: 0; }
.wks-actions form { display: contents; }
.wks-link-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 10px 2px;
  min-height: 44px;
  font-family: var(--brand-font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--fg-link);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.wks-link-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.wks-link-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-primary-soft); }
.wks-link-btn:disabled { color: var(--fg-3); cursor: default; text-decoration: none; font-variant-numeric: tabular-nums; }

/* Secondary CTA (the finder's email form). */
.wks-auth .auth-btn--secondary {
  background: var(--brand-surface);
  color: var(--fg-1);
  box-shadow: inset 0 0 0 1px var(--border-subtle), var(--shadow-xs);
}
.wks-auth .auth-btn--secondary:hover { background: var(--paper-100); box-shadow: inset 0 0 0 1px var(--slate-300), var(--shadow-sm); }
.wks-auth .auth-btn--secondary:active { background: var(--paper-200); }

/* ─── Legal pages ─────────────────────────────────────────────────── */
.wks-legal { font-size: var(--fs-body); line-height: 1.6; color: var(--fg-2); }
.wks-legal h2 {
  font-family: var(--brand-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: var(--space-6) 0 var(--space-2);
}
.wks-legal h2:first-child { margin-top: 0; }
.wks-legal p { margin: 0 0 var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  .wks-progress__seg.is-current::after { animation: none; }
  .wks-skip, .wks-bar__link, .wks-foot a, .wks-foot__back svg, .wks-addr__host, .wks-addr__summary, .wks-more__summary,
  .wks-addr__summary::before, .wks-more__summary::before, .wks-slug, .wks-link-btn, .wks-identity__btn, .wks-discount__btn { transition: none; }
}