/* page-register
 * Shared auth shell (card, intro, inputs, buttons, language pill) lives in pages/login.css.
 * Here: ceoacc's register field grid (>=768px: username|email, password|confirm) and the custom checkbox.
 */
/* ceoacc's register page keeps slightly tighter inline spacing than login. */
#page-register .auth-intro p { margin-bottom: 18px; }
#page-register .auth-form h3 { margin-bottom: 5px; }

/* Below 768px ceoacc's .row is a wrapping flex row of full-width columns: margins add up, never collapse. */
#page-register .auth-grid { display: flex; flex-direction: column; }
@media (min-width: 768px) {
  #page-register .auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
  #page-register .auth-grid > * { grid-column: 1 / -1; }
  #page-register .auth-grid > .auth-half { grid-column: auto; }
}

/* Bootstrap custom-checkbox look: 1.25rem box, 2px border, 5px radius, label text 1.5rem + .625rem from the edge
 * (rem sizes shrink with the 15.5px phone root font like ceoacc). ceoacc nests it in .form-check-inline
 * (2px baseline offset, .75rem right margin) > .custom-control-inline (1rem right margin, 10px bottom); the empty
 * Turnstile row under it adds another 10px, so the box ends 28px above the submit button (20px + the button's 8px). */
#page-register .auth-agree { position: relative; display: flex; align-items: flex-end; min-height: 24px; margin: 2px 1.75rem 20px 0; padding-left: 1.5rem; }
#page-register .auth-agree-input { position: absolute; left: 0; top: 0; z-index: -1; width: 16px; height: 0; margin: 0; opacity: 0; }
#page-register .auth-agree-label { position: relative; display: block; margin-bottom: 5px; padding-left: .625rem; cursor: pointer; }
#page-register .auth-agree-label::before,
#page-register .auth-agree-label::after {
  content: "";
  position: absolute;
  top: .1rem;
  left: -1.5rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 5px;
}
#page-register .auth-agree-label::before {
  background: var(--auth-check-bg);
  border: 2px solid var(--auth-check-line);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#page-register .auth-agree-label::after { background: 50% / 50% 50% no-repeat; }
#page-register .auth-agree-input:checked + .auth-agree-label::before { color: #ffffff; background: #3378ff; border-color: #3378ff; box-shadow: none; }
#page-register .auth-agree-input:checked + .auth-agree-label::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E");
}
/* ceoacc's focus cue on the checkbox is a light-blue border (the focus ring lands on the hidden input). */
#page-register .auth-agree-input:focus + .auth-agree-label::before { box-shadow: none; }
#page-register .auth-agree-input:focus:not(:checked) + .auth-agree-label::before { border-color: #b3ccff; }