/* =====================================================================
   RegisterUser26.ascx.css - the create-an-account page (KG/Claude 10/3/2026)
   Builds on Login26.ascx.css (the card, fields, buttons, alert and the Swami on the card's edge), which the control links first.
   Only what registering adds lives here: the two-column rows, hints, the select, the option chips, the "more" section and the confirmation panel.
   Colors come from cssPalette26.css (--sw-*).
   ===================================================================== */

/* one column of text on the left, the card on the right; the card is taller than the headline, so top-align */
.ru26-grid { grid-template-areas: "head card"; align-items: start; }
.ru26-grid .au26-head { align-self: start; padding-top: 70px; }
.ru26-grid .au26-cardwrap { align-self: start; }

.ru26-points { margin: 22px 0 0; padding: 0; list-style: none; max-width: 30em; }
.ru26-points li { position: relative; margin: 0 0 10px; padding-left: 28px; font-size: 16px; line-height: 1.45; color: var(--sw-on-night-soft); }
.ru26-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sw-gold) 22%, transparent);
  border: 2px solid var(--sw-gold);
}

/* two fields side by side */
.ru26-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.ru26-card .au26-field { margin-bottom: 14px; }
.ru26-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--sw-muted); }
.ru26-hint-tight { margin: -6px 0 16px; }
#ru26-match.is-ok { color: var(--sw-success); font-weight: 600; }
#ru26-match.is-bad { color: var(--sw-warning); font-weight: 600; }

.ru26-card input.au26-input.ru26-select { appearance: auto; padding-right: 10px; }

/* "a few more things" */
.ru26-more { margin: 4px 0 18px; border-top: 1px solid var(--sw-line); padding-top: 14px; }
.ru26-more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--sw-navy); padding: 2px 0 12px; }
.ru26-more summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--sw-theme) 40%, transparent); outline-offset: 2px; border-radius: 4px; }

.ru26-set { margin: 0 0 16px; padding: 0; border: 0; }
.ru26-set legend { padding: 0; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--sw-ink-soft); }
label.ru26-opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 8px 8px 0;
  padding: 7px 12px;
  font-size: 14px;
  color: var(--sw-ink);
  background: var(--sw-panel);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-pill);
  cursor: pointer;
}
label.ru26-opt input { margin: 0; width: 16px; height: 16px; accent-color: var(--sw-red); }
.ru26-wait { align-items: flex-start; margin-bottom: 10px; }
.ru26-wait input { margin-top: 3px; }

.ru26-go { margin-top: 4px; }
.au26-card .ru26-go.is-busy { opacity: .7; cursor: progress; }

/* the confirmation */
.ru26-done h2 { margin-bottom: 14px; }
.ru26-done p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; color: var(--sw-ink-soft); }
.ru26-done .ru26-done-junk { padding: 12px 14px; color: var(--sw-warning); background: var(--sw-warning-bg); border-radius: var(--sw-radius); font-size: 15px; }
.ru26-done .au26-btn { margin-top: 8px; }

@media (max-width: 900px) {
  .ru26-grid { grid-template-areas: "head" "card"; }
  .ru26-grid .au26-head { padding-top: 0; }
  .ru26-points { margin-left: auto; margin-right: auto; text-align: left; }
}
@media (max-width: 640px) {
  .ru26-row { grid-template-columns: minmax(0, 1fr); }
  .ru26-points { display: none; }
}