/* The concierge front door: the one form, and the agreement page (/welcome).
   Composes the SID tokens already loaded by clarity.css. Light pages by default;
   the home page's dark stage overrides colour only. */

.ckr .ckr-concierge { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; }
/* Layout rules below set display; an element we hide must stay hidden. */
.ckr [hidden] { display: none !important; }

/* Who are you here as? SID's own radio (the square box and square dot, design/sid .radio),
   so the choices read as options and the button stays the one boxed action. One may be
   pre-set by the door. */
.ckr .ckr-paths { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-3); row-gap: var(--s-1); margin: 0; padding: 0; border: 0; min-width: 0; }
.ckr .ckr-paths legend { float: left; margin-right: var(--s-3); padding: 0; font-size: var(--fz-body-1); line-height: var(--s-4); letter-spacing: var(--track-body-1); }
.ckr .ckr-paths .radio { min-height: var(--s-4); font-size: var(--fz-body-1); line-height: var(--lh-body-1); letter-spacing: var(--track-body-1); }

/* The form opens in steps (concierge.js sets data-stage). Hidden steps keep their space, so
   nothing moves under the cursor; only the emphasis moves. SID motion law: opacity only, 0.15s. */
.ckr .ckr-concierge [data-step] { transition: opacity 0.15s ease, visibility 0.15s ease; }
.ckr .ckr-concierge[data-stage="idle"] [data-step] { opacity: 0; visibility: hidden; }
.ckr .ckr-concierge[data-stage="open"] [data-step],
.ckr .ckr-concierge[data-stage="email"] [data-step="send"] { opacity: 0.38; }
.ckr .ckr-concierge[data-stage="open"] [data-step="choose"]:is(:hover, :focus-within) { opacity: 1; }
.ckr .ckr-concierge [data-step="aside"] { opacity: 0.62; }
.ckr .ckr-concierge[data-stage="idle"] [data-step="aside"] { opacity: 0; }
/* Sent: the form dims out, the note dims in. */
.ckr .ckr-concierge { transition: opacity 0.15s ease; }
.ckr .ckr-concierge.is-leaving { opacity: 0; }
.ckr .ckr-sent { opacity: 0; transition: opacity 0.15s ease; }
.ckr .ckr-sent.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ckr .ckr-concierge, .ckr .ckr-concierge [data-step], .ckr .ckr-sent { transition: none; } }

/* The email field and its button, for light pages (the home page has its own). */
.ckr:not(.ckr-home) .ckr-concierge .ckr-signup { display: flex; gap: var(--s-1); align-items: stretch; }
.ckr:not(.ckr-home) .ckr-concierge .field { flex: 1 1 auto; min-width: 0; }
.ckr:not(.ckr-home) .ckr-concierge input[type="email"], .ckr .ckr-welcome input[type="email"], .ckr .ckr-welcome input[type="text"], .ckr .ckr-welcome textarea {
  width: 100%; min-width: 0; padding: var(--s-2); font: inherit; font-size: var(--fz-body-1); line-height: var(--lh-body-1); letter-spacing: var(--track-body-1);
  color: var(--ink); background: var(--paper); border: var(--hairline) solid var(--line-box); border-radius: 0;
}
.ckr:not(.ckr-home) .ckr-concierge input[type="email"] { height: calc(var(--s-4) + var(--s-1)); }
.ckr:not(.ckr-home) .ckr-concierge .ctl-btn { height: calc(var(--s-4) + var(--s-1)); }
/* The one action: SID's primary button, the full width of the field above it. */
.ckr .ckr-concierge > .ctl-btn { align-self: stretch; width: 100%; }
.ckr .ckr-panel + p { margin-top: var(--s-2); }
.ckr .ckr-concierge .ctl-btn, .ckr .ckr-welcome .ctl-btn { white-space: nowrap; }

.ckr .ckr-typo, .ckr .ckr-write, .ckr .ckr-concierge .ckr-form-status { margin: 0; font-size: var(--fz-body-1); line-height: var(--lh-body-1); letter-spacing: var(--track-body-1); }
.ckr .ckr-typo button, .ckr .ckr-again { appearance: none; padding: 0; color: inherit; background: none; border: 0; font: inherit; text-decoration: underline; text-underline-offset: var(--focus-offset); cursor: pointer; }
.ckr .ckr-write a { text-decoration: underline; text-underline-offset: var(--focus-offset); }
.ckr .ckr-sent p + p { margin-top: var(--s-1); }

/* Home: the dark stage. */
.ckr-home .ckr-concierge { align-items: center; text-align: center; }
.ckr-home .ckr-paths { justify-content: center; }
.ckr-home .ckr-paths legend { float: none; width: 100%; margin: 0 0 var(--s-1); color: var(--paper-90); }
.ckr-home .ckr-paths .radio { color: var(--paper-90); }
.ckr-home .ckr-paths .radio input { background: transparent; border-color: var(--paper-90); }
.ckr-home .ckr-paths .radio input:checked { background: transparent; }
.ckr-home .ckr-paths .radio input:checked::after { background: var(--paper); }
.ckr-home .ckr-paths .radio input:focus-visible { outline-color: var(--paper); }
.ckr-home .ckr-typo, .ckr-home .ckr-write { color: var(--paper-90); }
/* The button now sits below the choices, not beside the field. */
.ckr-home .ckr-concierge > .ctl-btn { height: calc(var(--s-4) + var(--s-1)); padding-inline: var(--s-3); color: var(--ink); background: var(--paper); border-color: var(--paper); font-size: var(--fz-body-1); line-height: var(--lh-body-1); letter-spacing: var(--track-body-1); }
.ckr-home .ckr-concierge > .ctl-btn:hover { color: var(--grey-51); }
.ckr-home .ckr-concierge > .ctl-btn:focus-visible { outline-color: var(--paper); }
.ckr-home .ckr-concierge > .ctl-btn:disabled { color: var(--grey-51); cursor: wait; }
.ckr-home .ckr-sent, .ckr-home .ckr-sent p, .ckr-home .ckr-sent strong, .ckr-home .ckr-sent button { color: var(--paper); }
.ckr-home .ckr-sent { text-align: center; font-size: var(--fz-body-1); line-height: var(--lh-body-1); letter-spacing: var(--track-body-1); }
.ckr-home .ckr-sent p.ckr-muted, .ckr-home .ckr-sent .ckr-muted a { color: var(--paper-62); }
.ckr-home .ckr-sent a { text-decoration: underline; text-underline-offset: var(--focus-offset); }

/* About: the panel that opens where they click. */
.ckr .ckr-panel { margin-top: var(--s-3); padding: var(--s-3); }

/* The agreement page. */
.ckr .ckr-welcome { max-width: var(--col-2, 40rem); }
.ckr .ckr-welcome h1 { margin: 0 0 var(--s-3); }
.ckr .ckr-welcome .ckr-step + .ckr-step { margin-top: var(--s-4); }
.ckr .ckr-welcome [data-welcome] > * + *, .ckr .ckr-welcome form > * + * { margin-top: var(--s-3); }
.ckr .ckr-welcome .ckr-choices { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.ckr .ckr-welcome .ckr-choices .ctl-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ckr .ckr-welcome .ckr-fields { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.ckr .ckr-welcome .ckr-fields label { display: grid; gap: var(--s-1); font-size: var(--fz-body-1); }
.ckr .ckr-welcome textarea { min-height: calc(3 * var(--s-4)); resize: vertical; }
.ckr .ckr-welcome .ckr-terms { margin-top: var(--s-2); padding: var(--s-3); color: var(--grey-51); }
.ckr .ckr-welcome .ckr-terms p { margin: 0; }
.ckr .ckr-welcome .ckr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.ckr .ckr-welcome .ckr-loading { color: var(--grey-51); }
.ckr .ckr-welcome .ckr-guess { margin: 0; }
.ckr .ckr-welcome .ckr-error { color: var(--ink); }
/* What we have prepared and what we take it they are here for; their answer sits right under it. */
.ckr .ckr-welcome .ckr-foresight { margin: 0; }
.ckr .ckr-welcome .ckr-purpose { margin-top: var(--s-2); }
.ckr .ckr-welcome .ckr-purpose legend { float: none; width: 100%; margin: 0 0 var(--s-1); }
.ckr .ckr-welcome .ckr-step > .ckr-paths:not(.ckr-purpose) { margin-top: var(--s-2); }
.ckr .ckr-welcome .ckr-quiet { margin-top: var(--s-2); color: var(--grey-51); font-size: var(--fz-body-1); }
/* The sentence above already asks; its label is for screen readers only. */
.ckr .ckr-welcome .ckr-purpose > legend.ckr-quiet { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 40rem) {
  .ckr:not(.ckr-home) .ckr-concierge .ckr-signup { flex-direction: column; }
  .ckr .ckr-concierge .ctl-btn { width: 100%; }
  /* Narrow screens: the choices stand as one tidy column, centred as a block on the home page. */
  .ckr .ckr-paths { flex-direction: column; align-items: flex-start; row-gap: 0; }
  .ckr .ckr-paths legend { float: none; margin: 0 0 var(--s-1); }
  .ckr-home .ckr-paths { width: fit-content; margin-inline: auto; }
  .ckr-home .ckr-paths legend { width: auto; text-align: center; }
}