/* join.html, edit links, privacy and terms: same tokens as the site (tokens.css via style.css) */
.formpage { background: var(--color-paper-2); }
.fhead { background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.fhead__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 68px; }
.fhead__back { font-size: var(--text-sm); font-weight: 500; }
.fhead__back:hover { color: var(--color-green); }
.fmain { max-width: 760px; padding-block: var(--space-2xl) var(--space-3xl); }
.fintro { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.fintro h1 { font-size: var(--text-section); max-width: none; }
.fdemo { padding: var(--space-sm) var(--space-md); border-radius: var(--radius); background: color-mix(in oklab, var(--color-sun) 40%, var(--color-paper)); font-size: var(--text-sm); font-weight: 500; }
.rform { display: grid; gap: var(--space-lg); }
.fcard { margin: 0; padding: var(--space-lg); border: 0; border-radius: calc(var(--radius) * 2); background: var(--color-paper); display: grid; gap: var(--space-md); min-width: 0; }
.fcard > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-xs); font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); }
.f { display: grid; gap: var(--space-2xs); min-width: 0; margin: 0; padding: 0; border: 0; }
.f > span, .f > legend { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); padding: 0; }
.f input, .f select, .f textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 2px solid var(--color-paper-3); border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); font: inherit; }
.f textarea { min-height: 72px; resize: vertical; }
.f input:hover, .f select:hover, .f textarea:hover { border-color: color-mix(in oklab, var(--color-teal) 60%, var(--color-paper-3)); }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-teal); }
.f input:disabled { background: var(--color-paper-2); color: var(--color-muted); cursor: not-allowed; }
.fhint { font-size: var(--text-sm); color: var(--color-muted); }
.seg2 { display: grid; gap: var(--space-xs); }
.seg2 label { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) var(--space-md); border-radius: var(--radius); background: var(--color-paper-2); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.seg2 label:hover { background: var(--color-paper-3); }
.seg2 label:has(input:checked) { background: color-mix(in oklab, var(--color-teal) 30%, var(--color-paper)); }
.seg2 input { margin-top: var(--space-2xs); accent-color: var(--color-green); width: 18px; height: 18px; flex: none; }
.camlist { display: grid; gap: var(--space-xs); }
.camlist__t { margin-top: var(--space-sm); font-size: var(--text-xs); font-weight: 700; color: var(--color-muted); }
.camrow { display: grid; grid-template-columns: minmax(0, 1fr) 110px 80px; gap: var(--space-sm); align-items: end; padding: var(--space-sm); border-radius: var(--radius); background: var(--color-paper-2); }
.camrow.is-on { background: color-mix(in oklab, var(--color-teal) 25%, var(--color-paper)); }
.camrow__pick { display: flex; gap: var(--space-sm); align-items: center; min-height: 44px; font-weight: 700; cursor: pointer; }
.camrow__pick input { width: 20px; height: 20px; accent-color: var(--color-green); }
.camrow__num { display: grid; gap: var(--space-3xs); font-size: var(--text-xs); color: var(--color-muted); }
.camrow__num input { min-height: 40px; padding: var(--space-xs); border: 2px solid var(--color-paper-3); border-radius: var(--radius); font: inherit; background: var(--color-paper); }
.camrow__num input:disabled { background: var(--color-paper-2); cursor: not-allowed; }
.photos { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-md); }
.ph { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); cursor: pointer; }
.ph input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ph__prev { display: grid; place-items: center; height: 160px; border: 2px dashed var(--color-paper-3); border-radius: calc(var(--radius) * 2); background: var(--color-paper-2); color: var(--color-muted); font-weight: 500; overflow: hidden; transition: border-color var(--dur-micro) var(--ease-out); }
.ph:hover .ph__prev { border-color: var(--color-teal); }
.ph:focus-within .ph__prev { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.ph__prev img { width: 100%; height: 100%; object-fit: cover; }
.fsend { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: calc(var(--radius) * 2); background: var(--color-paper); }
.consent { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--text-sm); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-green); flex: none; }
.consent a { color: var(--color-green); font-weight: 700; }
.fmsg { min-height: 1.4em; font-weight: 700; }
.fmsg.is-bad { color: var(--color-red); }
.fsend .btn { justify-self: start; }
.fdone { display: grid; gap: var(--space-lg); justify-items: start; padding: var(--space-xl); border-radius: calc(var(--radius) * 2); background: var(--color-paper); }
.fdone h2 { font-size: var(--text-section); }
/* privacy / terms */
.doc { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: calc(var(--radius) * 2); background: var(--color-paper); }
.doc h2 { font-size: var(--text-xl); margin-top: var(--space-md); }
.doc ul { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); }
@media (max-width: 40rem) {
  .camrow { grid-template-columns: minmax(0, 1fr) 90px 64px; }
  .photos { grid-template-columns: 1fr; }
  .fcard, .fsend, .doc { padding: var(--space-md); }
}