/* The join form (views/join/index.ejs, public/js/join.js). Loaded by the join pages only, after app.css, and written in the same tokens (stylelint holds it to the same
   rules as app.css). The form is a plain page first: every question is a card in a column, which is all a visitor gets with no script. When the script runs it adds
   .jv-js to the form's wrapper and one of .is-focus, .is-swipe or .is-all (the mode the visitor picked; one question at a time is the default), and the rules below
   dress those states. Motion is only ever added for visitors who have not asked for less of it. */

.jv { max-width: 40rem; margin: 0 auto; padding: var(--space-4) 0 var(--space-6); }
.jv-head { text-align: center; margin-bottom: var(--space-5); }
.jv-head .mark { width: 3rem; height: 3rem; color: var(--accent); }
.jv-head .wordmark { font-family: var(--font); font-size: var(--text-lg); margin: var(--space-1) 0 var(--space-3); color: var(--ink-2); }
.jv-head h1 { margin-bottom: var(--space-2); }
.jv-summary { color: var(--ink-3); font-size: var(--text-sm); margin: var(--space-3) auto 0; max-width: 30rem; }

/* A question: a card with its legend as the question, in the display face. */
.jv-q { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-12); padding: var(--space-5); margin-bottom: var(--space-4); min-width: 0; }
.jv-q.has-error { border-color: var(--danger); }
.jv-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.jv-fs > legend { display: block; padding: 0; margin-bottom: var(--space-3); font-family: var(--font); font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: 1.3; color: var(--ink); float: left; width: 100%; }
.jv-fs > legend + * { clear: both; }
.jv-num { display: inline-block; min-width: 1.75rem; margin-right: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--accent); }
.jv-req { display: inline-block; margin-left: var(--space-2); font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.jv-q .field-hint { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.jv-q input[type=text], .jv-q input[type=email], .jv-q input[type=tel], .jv-q input[type=url], .jv-q textarea { width: 100%; font-size: var(--text-md); }
.jv-q textarea { min-height: 7rem; }
.jv-tip { display: none; margin: var(--space-1) 0 0; }
.jv-js.is-focus .jv-tip, .jv-js.is-swipe .jv-tip { display: block; }

/* The "About the land" panel (views/join/_land.ejs): information between two questions, drawn only while an administrator has written something for it. It is a card like a
   question but with an accent edge, so it reads as something to take in and not something to answer. In one question at a time and in the swipe it is a screen like any other. */
.jv-info { background: var(--surface); border: 1px solid var(--line); border-left: .25rem solid var(--accent); border-radius: var(--r-12); padding: var(--space-5); margin-bottom: var(--space-4); min-width: 0; }
.jv-info h2 { font-family: var(--font); font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: 1.3; color: var(--ink); margin: 0 0 var(--space-3); }
.jv-info-body { color: var(--ink-2); overflow-wrap: anywhere; }
.jv-info-body > :first-child { margin-top: 0; }
.jv-info-body > :last-child { margin-bottom: 0; }
.jv-info-body ul, .jv-info-body ol { padding-left: var(--space-5); }
.jv-info-body li { margin-bottom: var(--space-1); }

/* Choices: each option is a whole target, not a small box. */
.jv-opts { display: grid; gap: var(--space-2); }
.jv-opt { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--r-8); background: var(--field); cursor: pointer; min-height: var(--control); font-weight: var(--weight-regular); }
.jv-opt:hover { border-color: var(--accent); }
.jv-opt input { margin: 3px 0 0; flex: none; }
.jv-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.jv-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.jv-more { margin-top: var(--space-3); }
.jv-more label { display: block; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.jv-consent { display: grid; gap: var(--space-2); }
.jv-send { margin-top: var(--space-5); text-align: center; }
.jv-send .btn { min-height: 2.75rem; padding: 0 var(--space-6); font-size: var(--text-md); }

/* What the script adds. None of this exists without it. */
.jv-top, .jv-nav, .jv-screen { display: none; }

/* The chrome: the progress line and bar, the three modes, and the way out. */
.jv-js .jv-top { display: block; }
.jv-js .jv-summary { display: none; }
.jv-js.is-all .jv-top { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: var(--space-3) 0; margin-bottom: var(--space-3); border-bottom: 1px solid var(--line-2); }
.jv-bar { height: .375rem; background: var(--surface-3); border-radius: var(--r-6); overflow: hidden; margin-top: var(--space-2); }
.jv-bar > span { display: block; height: 100%; background: var(--accent); width: 0; }
.jv-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.jv-headline { margin: 0; font-size: var(--text-xs); color: var(--ink-2); font-weight: var(--weight-medium); }
.jv-modes { display: inline-flex; gap: var(--space-1); }
.jv-mode { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-6); font: inherit; font-size: var(--text-xs); padding: var(--space-1) var(--space-3); min-height: 1.75rem; cursor: pointer; }
.jv-mode[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.jv-mode:focus-visible, .jv-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* One question at a time, and the swipe: a full-screen layer over the page. */
.jv-js.is-focus, .jv-js.is-swipe { position: fixed; inset: 0; z-index: 60; max-width: none; margin: 0; padding: 0; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; height: 100vh; height: 100dvh; }
.jv-js.is-focus .jv-top, .jv-js.is-swipe .jv-top { flex: none; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-2); background: var(--bg); }
.jv-js.is-focus .jv-form, .jv-js.is-swipe .jv-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.jv-js.is-focus .jv-stage, .jv-js.is-swipe .jv-stage { flex: 1; min-height: 0; }
.jv-js.is-focus .jv-head, .jv-js.is-swipe .jv-head, .jv-js.is-focus .jv-send, .jv-js.is-swipe .jv-send, .jv-js.is-focus .error-summary, .jv-js.is-swipe .error-summary { display: none; }
.jv-js.is-focus .jv-q, .jv-js.is-focus .jv-screen, .jv-js.is-focus .jv-info { display: none; width: min(40rem, 100%); max-height: 100%; overflow-y: auto; border: 0; background: transparent; padding: var(--space-2) 0; margin: 0; }
.jv-js.is-focus .jv-q.is-current, .jv-js.is-focus .jv-screen.is-current, .jv-js.is-focus .jv-info.is-current { display: block; }
.jv-js.is-focus .jv-stage { overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: var(--space-5) var(--space-4); }
.jv-js.is-swipe .jv-stage { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.jv-js.is-swipe .jv-q, .jv-js.is-swipe .jv-screen, .jv-js.is-swipe .jv-info { display: block; flex: 0 0 100%; scroll-snap-align: start; overflow-y: auto; margin: 0; border-radius: 0; border: 0; padding: var(--space-5) var(--space-4); }
.jv-js.is-focus .jv-fs > legend, .jv-js.is-swipe .jv-fs > legend { font-size: var(--text-xl); }
.jv-js.is-focus .jv-q, .jv-js.is-swipe .jv-q, .jv-js.is-focus .jv-info, .jv-js.is-swipe .jv-info { box-shadow: none; }
.jv-js.is-focus .jv-info h2, .jv-js.is-swipe .jv-info h2 { font-size: var(--text-xl); }
.jv-js.is-focus .jv-info-body, .jv-js.is-swipe .jv-info-body { font-size: var(--text-md); }
.jv-js.is-focus .jv-q input[type=text], .jv-js.is-focus .jv-q input[type=email], .jv-js.is-focus .jv-q input[type=tel], .jv-js.is-focus .jv-q input[type=url], .jv-js.is-focus .jv-q textarea { font-size: var(--text-lg); }
.jv-js.is-focus .jv-nav, .jv-js.is-swipe .jv-nav { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line-2); background: var(--bg); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
.jv-nav .jv-hint { color: var(--ink-3); font-size: var(--text-xs); margin: 0; }
.jv-nav .btn[hidden] { display: none; }

/* The screens that are not questions: the welcome and the review. */
.jv-js.is-all .jv-screen { display: none; }
.jv-screen h2 { font-family: var(--font); font-size: var(--text-xl); margin: 0 0 var(--space-3); }
.jv-screen p { color: var(--ink-2); }
.jv-review-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); }
.jv-review-list li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line-2); }
.jv-review-list .q { display: block; font-size: var(--text-xs); color: var(--ink-3); }
.jv-review-list .a { display: block; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.jv-review-list .none { color: var(--ink-3); font-style: italic; }
.jv-link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--text-xs); color: var(--accent); text-decoration: underline; cursor: pointer; }
.jv-problem { color: var(--danger); font-size: var(--text-sm); font-weight: var(--weight-medium); margin: var(--space-2) 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .jv-bar > span { transition: width .25s ease; }
  .jv-js.is-focus .jv-q.is-current, .jv-js.is-focus .jv-screen.is-current, .jv-js.is-focus .jv-info.is-current { animation: jv-in .22s ease-out; }
  .jv-js.is-swipe .jv-stage { scroll-behavior: smooth; }
}
@keyframes jv-in { from { opacity: 0; transform: translateY(var(--space-3)); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
  .jv-q, .jv-info { padding: var(--space-4); }
  .jv-js.is-focus .jv-nav .jv-hint, .jv-js.is-swipe .jv-nav .jv-hint { display: none; }
  .jv-mode { padding: var(--space-1) var(--space-2); }
}