/* Register page: the app's two-step form (RegisterScreen), measured from the
   imcongo-ui components: ChoiceCard, Input, Select, PhoneInput, Checkbox,
   Button. Text sizes are the imcongo-ui roles from tokens.css, which scale with
   the viewport exactly as in the app; spacing, radii and borders are the app's
   fixed values. A wider window keeps the same column, centred. */
.register { --side-left: max(var(--space-4), env(safe-area-inset-left)); --side-right: max(var(--space-4), env(safe-area-inset-right)); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; background: var(--color-paper); }

/* Header: white bar, back button, title */
.register-header { display: flex; align-items: center; gap: var(--space-3); padding: calc(var(--space-5) + env(safe-area-inset-top)) var(--side-right) var(--space-4) var(--side-left); margin-bottom: 10px; background: var(--color-card); border-bottom: 1px solid var(--color-line); }
.register-header h1 { margin: 0; color: var(--text-header-title-color); font: var(--text-header-title-font-weight) var(--text-header-title-font-size)/var(--text-header-title-line-height) var(--text-header-title-font-family); }
.register-back { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); }

.register-form { flex: 1; display: flex; flex-direction: column; padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
.step { display: grid; gap: var(--space-3); align-content: start; padding: 0 var(--side-right) 0 var(--side-left); }
.step-details { gap: var(--space-4); }
.step h2 { margin: 0; color: var(--text-header-title-color); font: var(--text-header-title-font-weight) var(--text-header-title-font-size)/var(--text-header-title-line-height) var(--text-header-title-font-family); }
.step h3 { margin: var(--space-2) 0 0; color: var(--text-section-title-color); font: var(--text-section-title-font-weight) var(--text-section-title-font-size)/var(--text-section-title-line-height) var(--text-section-title-font-family); }
.step-subtitle { margin: 0 0 var(--space-2); }

/* Account type: ChoiceCard */
.choice { display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1.5px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-card); }
.choice-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; }
.choice-card strong { text-align: center; color: var(--text-section-title-color); font: var(--text-section-title-font-weight) var(--text-section-title-font-size)/var(--text-section-title-line-height) var(--text-section-title-font-family); }
.choice-text { display: block; align-self: stretch; margin-top: calc(var(--space-3) * -1 + var(--space-1)); text-align: center; }
.choice input:checked + .choice-card { border-color: var(--color-primary); background: var(--color-primary-tint); }
.choice input:focus-visible + .choice-card { outline: 3px solid var(--color-secondary-tint); }
.choice:hover .choice-card { border-color: var(--color-secondary); background: var(--color-line-soft); }
.choice input:checked + .choice-card, .choice:hover input:checked + .choice-card { border-color: var(--color-primary); background: var(--color-primary-tint); }

/* PhoneInput: black block with a "+" in front, digits only */
.phone { display: flex; align-items: stretch; }
.phone-plus { display: flex; align-items: center; justify-content: center; width: 44px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: #000; color: #fff; font-weight: 700; }
.phone input { flex: 1; min-width: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }


/* Second contact: two ghost buttons that reveal one field */
.channel-buttons { display: flex; gap: var(--space-2); }
.channel-buttons button { flex: 1; padding: var(--space-3) var(--space-1); border: 1.5px solid transparent; border-radius: var(--radius-md); background: var(--color-secondary-tint); color: var(--color-ink); cursor: pointer; white-space: nowrap; font: var(--text-button-text-font-weight) var(--text-button-text-font-size)/var(--text-button-text-line-height) var(--text-button-text-font-family); }
.channel-buttons button.selected { border-color: var(--color-secondary); }
.channel-email, .channel-phone { margin-top: var(--space-4); }
.js .second-channel:not([data-kind]) .channel-email, .js .second-channel:not([data-kind]) .channel-phone,
.js .second-channel[data-kind=email] .channel-phone, .js .second-channel[data-kind=phone] .channel-email { display: none; }

/* Terms: Checkbox 22px, radius 10, primary when checked */
.terms { display: flex; align-items: flex-start; gap: var(--space-2); }
.terms input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-card) center / 14px no-repeat; cursor: pointer; }
.terms input:hover { background-color: var(--color-line-soft); border-color: var(--color-secondary); }
.terms input:checked { border-color: var(--color-primary); background-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.terms input.is-invalid { border-color: var(--color-danger); }
.terms label { flex: 1; }
.terms a { color: var(--color-primary); text-decoration: underline; }

/* Error box and buttons: sit right after the form, like the app's continue row */
.register-actions { padding: var(--space-6) var(--side-right) 0 var(--side-left); }
.register-buttons { display: flex; gap: var(--space-3); }

/* Which parts show: with JavaScript one step at a time, the organisation block
   for professionals only; without JavaScript everything and one submit button. */
.pro-only { display: none; }
.register:not(.js) .pro-only, .register[data-type=professional] .pro-only { display: grid; gap: var(--space-4); }
.register.js[data-step="1"] [data-panel="2"], .register.js[data-step="2"] [data-panel="1"] { display: none; }
.register.js[data-step="1"] [data-submit], .register.js[data-step="2"] [data-continue] { display: none; }
.register:not(.js) [data-continue], .register:not(.js) [data-back-button] { display: none; }

/* Wider than a tablet: the same page as the desktop Login (legacy header and
   footer around a centred white card). Up to this width: the app's phone
   screens above. */
.adSkin, .header, .footer { display: none; }
.register-page { position: relative; min-height: 100vh; min-height: 100dvh; background: var(--color-paper); }
.register-page .pageLayer { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
@media (min-width: 1041px) {
  .adSkin { display: block; }
  .header { display: block; }
  /* The container runs down to the footer, and the footer casts the shadow upward onto it. */
  .footer { display: block; margin-top: 0; flex-shrink: 0; position: relative; z-index: 2; box-shadow: 0 -7px 18px rgba(20, 42, 32, .13); }
  .register-page { color: var(--color-ink); font: 14px/1.4 var(--text-body-text-font-family); }
  .register-header { display: none; }
  .register { flex: 1 0 auto; width: 100%; max-width: 1040px; min-height: 0; margin: 0 auto; padding: var(--space-6); border: 0; border-radius: 0; background: var(--color-card);
    /* Text roles at their design size (1x), as on the Login card, so the card sits in proportion with the 12px header and footer. */
    --text-header-title-font-size: 19.2px; --text-header-title-line-height: 27px;
    --text-section-title-font-size: 16px; --text-section-title-line-height: 23px;
    --text-body-text-font-size: 14px; --text-body-text-line-height: 20px;
    --text-label-font-size: 14px; --text-label-line-height: 20px;
    --text-field-text-font-size: 14px; --text-field-text-line-height: 20px;
    --text-button-text-font-size: 15px; --text-button-text-line-height: 21px;
    font: var(--text-body-text-font-weight) var(--text-body-text-font-size)/var(--text-body-text-line-height) var(--text-body-text-font-family); }
  .register-form { flex: none; padding: 0; }
  .step { padding: 0; }
  .step > h2, .step-subtitle { text-align: center; }
  .step > h2 { margin-bottom: 0; }
  .step-subtitle { margin-bottom: var(--space-3); }
  .register-actions { padding: var(--space-5) 0 0; }
  /* The card is as wide as the header. Step 1: the two account types side by side; step 2: the fields in two columns. */
  .register.js[data-step="1"] .step-type { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
  .register.js[data-step="1"] .step-type > h2, .register.js[data-step="1"] .step-type > .step-subtitle { grid-column: 1 / -1; }
  .register.js[data-step="1"] .choice, .register.js[data-step="1"] .choice-card { height: 100%; }
  .step-details, .register .step-details > .pro-only { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); align-items: start; }
  .step-details > h2, .step-details > .second-channel, .step-details > .terms, .step-details > .pro-only, .pro-only > h3 { grid-column: 1 / -1; }
  .register a:not(.register-back) { text-decoration: none; }
  .register .terms a { text-decoration: underline; }
}