/* School signup (/register). A focused, single-column auth page in the Resend mould — centred
   narrow column, labels above full-width fields, one primary action, corner art instead of chrome —
   drawn entirely from soi-tokens.css so it stays on-brand. Loaded instead of site.css/premium.css:
   this page carries no header nav or footer, so it needs none of their rules. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.auth{margin:0;min-height:100vh;min-height:100dvh;font:400 var(--fs-body)/1.5 var(--sans);color:var(--soi-umber);background:var(--soi-canvas);overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased}
a{color:inherit}

.skip{position:absolute;left:16px;top:-48px;z-index:10;padding:8px 14px;border-radius:var(--radius-btn);background:var(--soi-umber);color:var(--soi-canvas);text-decoration:none;font-weight:600}
.skip:focus{top:16px}

/* Corner art — pinned to the page's corners, decorative, never intercepts a click. */
.auth-art{position:absolute;width:min(46vw,560px);height:auto;pointer-events:none;z-index:0}
.auth-art--top{top:0;right:0}
.auth-art--bottom{bottom:0;left:0}

.auth-back{position:absolute;top:28px;left:32px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 8px;margin:-6px -8px;border-radius:8px;font-size:14px;font-weight:600;color:var(--soi-umber-soft);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
.auth-back svg{width:14px;height:14px}
.auth-back:hover{color:var(--soi-umber)}

.auth-main{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 16px 48px}
.auth-card{width:100%;max-width:440px;text-align:center}

.auth-logo{display:block;width:48px;height:48px;margin:0 auto 20px;border-radius:12px;box-shadow:0 0 0 1px var(--soi-sand),0 6px 18px -10px rgba(43,32,24,.35)}
.auth-card h1{margin:0;font-size:clamp(26px,5vw,30px);line-height:1.15;color:var(--soi-umber)}
.auth-sub{margin:10px 0 32px;font-size:14px;color:var(--soi-umber-soft)}
.auth-sub a,.auth-legal a{color:var(--soi-umber);font-weight:600;text-decoration:none}
.auth-sub a:hover,.auth-legal a:hover{text-decoration:underline;text-underline-offset:3px}

/* Form */
#registerForm{text-align:left}
.field{margin:0 0 18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field label{display:block;margin:0 0 7px;font-size:13px;font-weight:600;color:var(--soi-umber)}
.field input{width:100%;height:46px;padding:0 14px;border:1px solid var(--soi-sand);border-radius:var(--radius-input);background:var(--soi-surface);color:var(--soi-umber);font:inherit;font-size:15px;box-shadow:0 1px 2px rgba(43,32,24,.04);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.field input::placeholder{color:#9A8D7E}
.field input:hover{border-color:var(--soi-sand-deep)}
.field input:focus{outline:none;border-color:var(--soi-terracotta);box-shadow:0 0 0 4px var(--soi-terracotta-tint)}
.field input:user-invalid{border-color:var(--error)}
.hint{margin:7px 0 0;font-size:12.5px;color:var(--soi-umber-soft);overflow-wrap:anywhere}
.hint--link::before{content:'Your link: '}
.link-btn{padding:0;border:0;background:none;color:var(--soi-umber);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-btn:hover{color:var(--soi-terracotta)}

/* Input with a fixed prefix (the link) or a trailing button (show password). */
.affix{position:relative;display:flex;align-items:stretch}
.affix input:has(+ .affix-toggle){padding-right:46px}
.affix-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:8px;background:transparent;color:var(--soi-umber-soft);cursor:pointer}
.affix-toggle svg{width:18px;height:18px}
.affix-toggle:hover{color:var(--soi-umber);background:var(--soi-linen)}
.affix-toggle[aria-pressed="true"]{color:var(--soi-terracotta)}

.divider{display:flex;align-items:center;gap:14px;margin:30px 0 22px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--soi-umber-soft);font-family:var(--sans-caps)}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}

.auth-error{min-height:0;margin:0;font-size:14px;color:var(--error)}
.auth-error:not(:empty){margin:4px 0 14px;padding:10px 12px;border-radius:var(--radius-input);background:var(--error-bg)}

.auth-submit,.auth-link-btn{display:flex;align-items:center;justify-content:center;width:100%;height:48px;margin-top:6px;border:0;border-radius:var(--radius-btn);background:var(--soi-terracotta);color:#FFFDF8;font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(43,32,24,.18);transition:background var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.auth-submit:hover,.auth-link-btn:hover{background:var(--soi-terracotta-deep)}
.auth-submit:active{transform:translateY(1px)}
.auth-submit:disabled{cursor:progress;background:var(--soi-sand-deep);color:var(--soi-umber-soft);box-shadow:none}
.auth-submit.is-busy{font-size:0}
.auth-submit.is-busy::after{content:'Sending…';font-size:15px}

.auth-note{margin:14px 0 0;font-size:13px;line-height:1.55;text-align:center;color:var(--soi-umber-soft)}
.auth-legal{position:relative;z-index:1;margin:40px 0 0;max-width:440px;font-size:12.5px;text-align:center;color:var(--soi-umber-soft)}

/* Success state replaces the form in place. */
.auth-success{padding:8px 0 0}
.auth-card:has(.auth-success:not([hidden])) :is(h1,.auth-sub){display:none}
body:has(.auth-success:not([hidden])) .auth-legal{display:none}
.auth-success-mark{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 18px;border-radius:50%;background:var(--success-bg);color:var(--success)}
.auth-success-mark svg{width:26px;height:26px}
.auth-success h2{margin:0 0 10px;font-size:24px}
.auth-success p{margin:0 0 26px;color:var(--soi-umber-soft);line-height:1.6}

@media (max-width:560px){
  .auth-art--top{width:56vw;opacity:.8}
  .auth-art--bottom{display:none}
  .auth-back{top:20px;left:16px}
  .auth-main{padding:80px 16px 40px;justify-content:flex-start}
  .field-row{grid-template-columns:1fr;gap:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* Segmented control for kind (School vs Photographer) */
.auth-segmented {
  display: flex;
  background: var(--soi-linen);
  border: 1px solid var(--soi-sand);
  border-radius: var(--radius-input);
  padding: 4px;
  gap: 4px;
  margin-bottom: 20px;
}
.auth-segmented button {
  flex: 1;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: 600 13px/1 var(--sans);
  color: var(--soi-umber-soft);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.auth-segmented button[aria-pressed="true"] {
  background: var(--soi-surface);
  color: var(--soi-umber);
  box-shadow: 0 1px 3px rgba(43,32,24,.1);
}

/* Firebase Auth Buttons */
.auth-firebase-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.auth-firebase-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  border: 1px solid var(--soi-sand);
  border-radius: var(--radius-input);
  background: var(--soi-surface);
  color: var(--soi-umber);
  font: 600 14px/1 var(--sans);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(43,32,24,.04);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.auth-firebase-btn:hover {
  border-color: var(--soi-ochre);
  background: var(--soi-linen);
}
.auth-firebase-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.auth-phone-form, .auth-email-form {
  margin-top: 10px;
  padding: 14px;
  background: var(--soi-linen);
  border: 1px solid var(--soi-sand);
  border-radius: var(--radius-input);
  text-align: left;
}
.auth-phone-form .field, .auth-email-form .field {
  margin-bottom: 10px;
}
.auth-phone-form .auth-submit, .auth-email-form .auth-submit {
  height: 40px;
  font-size: 14px;
}

label .optional{font-weight:400;color:var(--soi-umber-soft)}