/* =========================================================================
   sign-up.php — "Create your Skolarli workspace"
   Loads after assets/lux.css (shared layout, inputs, button, footer, left network).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Left: same panel as login; the form is taller, so the panel stays put while it scrolls
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .skosu-page .lux-aside { position: sticky; top: 0; height: 100vh; }
}
/* Headline: login's .lux-headline (lux.css); the lede under it as on forgot (.luxfp-lede) */
.skosu-lede { margin: 18px 0 0; max-width: 470px; font-size: 18px; line-height: 1.5; font-weight: 500; color: var(--lux-muted); }

/* -------------------------------------------------------------------------
   Right: compact form (more fields than login)
   ------------------------------------------------------------------------- */
.skosu-wrap { max-width: 480px; padding: 0; }
.skosu-page .lux-main { padding-top: 32px; padding-bottom: 20px; }
.skosu-page .skosu-title { font-size: 31px; letter-spacing: -.02em; white-space: nowrap; }
.skosu-page .skosu-sub { margin: 8px 0 18px; font-size: 15.5px; line-height: 1.5; }
.skosu-page .lux-form .lux-field { margin-bottom: 12px; }
.skosu-page .lux-label { margin-bottom: 5px; font-size: 14px; }
.skosu-page .lux-form .form-control.lux-input,
.skosu-page .lux-form .form-select.lux-input { height: 44px; font-size: 15px; }
.skosu-page .lux-form .form-control.lux-input.skosu-plain { padding-left: 14px; } /* no icon */
.skosu-page .lux-icon { width: 18px; height: 18px; left: 14px; }
.skosu-page .lux-form .form-control.lux-input:not(.skosu-plain),
.skosu-page .lux-form .form-select.lux-input:not(.skosu-plain) { padding-left: 42px; }
.skosu-page .lux-form .form-select.lux-input.skosu-plain { padding-left: 14px; }
/* Field errors (same look as forgot / reset, assets/luxfp.css) */
.skosu-page .lux-field-error { margin-top: 5px; font-size: 13px; font-weight: 500; line-height: 1.4; color: #c62f2a; }
.skosu-page .lux-form .form-control.lux-input.lux-invalid,
.skosu-page .lux-form .form-select.lux-input.lux-invalid { border-color: #e2554f; }

.skosu-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }

/* Products: ASSESS · LEARN · CERTIFY  or  KREATOR — real checkboxes drawn as chips */
.skosu-products { border: 0; padding: 0; min-width: 0; }
.skosu-products legend { float: none; width: auto; padding: 0; }
.skosu-chips { display: flex; align-items: stretch; gap: 8px; }
.skosu-chip { position: relative; flex: 1 1 0; min-width: 0; margin: 0; cursor: pointer; }
.skosu-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.skosu-chip-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    height: 100%; min-height: 50px; padding: 6px 6px;
    border: 1px solid var(--lux-line); border-radius: 10px; background: #fff;
    text-align: center;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.skosu-chip-box strong { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--lux-ink); }
.skosu-chip-box small { font-size: 11.5px; font-weight: 500; line-height: 1.25; color: var(--lux-muted); }
.skosu-chip:hover .skosu-chip-box { border-color: #b9cfd1; }
.skosu-chip input:focus-visible + .skosu-chip-box { box-shadow: 0 0 0 4px rgba(var(--lux-primary-rgb), .16); border-color: var(--lux-primary); }
.skosu-chip input:checked + .skosu-chip-box {
    border-color: var(--lux-primary); background: #eef6f6;
    box-shadow: inset 0 0 0 1px var(--lux-primary);
}
.skosu-chip input:checked + .skosu-chip-box strong { color: var(--lux-primary-dark); }
.skosu-chip input:checked + .skosu-chip-box::after {
    content: ""; position: absolute; top: 5px; right: 5px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--lux-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.skosu-chip input:disabled + .skosu-chip-box { opacity: .45; cursor: not-allowed; background: #f6f7f7; }
.skosu-chip:has(input:disabled) { cursor: not-allowed; }
/* KREATOR: standalone, set apart by "or" and the purple accent */
.skosu-or { align-self: center; flex: none; font-size: 12px; font-weight: 600; font-style: italic; color: var(--lux-muted); }
.skosu-chip-solo input:checked + .skosu-chip-box { border-color: var(--lux-purple); background: #f6effc; box-shadow: inset 0 0 0 1px var(--lux-purple); }
.skosu-chip-solo input:checked + .skosu-chip-box strong { color: #6b2fa3; }
.skosu-chip-solo input:checked + .skosu-chip-box::after { background-color: var(--lux-purple); }
.skosu-chip-solo input:focus-visible + .skosu-chip-box { box-shadow: 0 0 0 4px rgba(155, 89, 208, .18); border-color: var(--lux-purple); }
.skosu-hint { margin-top: 6px; font-size: 13px; font-weight: 500; color: #6b2fa3; }

/* Workspace name: live state on the right, sign-in link preview underneath */
.skosu-page .lux-form .form-control.lux-input.skosu-ws-input,
.skosu-page .lux-form .form-control.lux-input.skosu-email-input { padding-right: 40px; }
/* Personal inbox (gmail…): allowed, amber hint */
.skosu-email-hint { margin-top: 5px; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: #8a5a00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skosu-ws-state[data-state="warn"] {
    background: #d97706 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.5v4.2' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.3' r='1' fill='%23fff'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.skosu-ws-state {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; border-radius: 50%;
}
.skosu-ws-state[data-state="checking"] { border: 2px solid #cfd8d9; border-top-color: var(--lux-primary); animation: skosu-spin .8s linear infinite; }
.skosu-ws-state[data-state="ok"] {
    background: #15803d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.skosu-ws-state[data-state="taken"] {
    background: #c62f2a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m5.5 5.5 5 5m0-5-5 5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
@keyframes skosu-spin { to { transform: translateY(-50%) rotate(360deg); } }
.skosu-ws-help { margin-top: 5px; font-size: 12.5px; font-weight: 500; color: var(--lux-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skosu-ws-help strong { color: var(--lux-text); font-weight: 600; }

/* Time zone select in the lux input style */
.skosu-page .lux-form .form-select.lux-input.skosu-select {
    padding-right: 36px; background-position: right 14px center; background-size: 14px 10px; cursor: pointer;
    text-overflow: ellipsis;
}

/* intl-tel-input: match the lux inputs */
.skosu-page .iti { display: block; width: 100%; }
.skosu-page .iti .iti__selected-country { border-radius: 10px 0 0 10px; }
.skosu-page .iti .iti__selected-country-primary { padding: 0 6px 0 12px; }
.skosu-page .iti .iti__selected-dial-code { font-size: 15px; font-weight: 500; color: var(--lux-ink); }
.skosu-page .iti__dropdown-content { border-radius: 10px; border: 1px solid var(--lux-line); box-shadow: 0 12px 32px rgba(16, 24, 40, .12); }
.skosu-page .iti__search-input { padding: 8px 10px; font-size: 14px; }
.skosu-page .iti__country { font-size: 14px; padding: 7px 10px; }

/* Password: meter + both rules on one line (same look as reset-password) */
.skosu-pwcheck { margin: -4px 0 14px; }
.skosu-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.skosu-meter span { height: 5px; border-radius: 3px; background: #e6eaea; transition: background .2s ease; }
.skosu-meter[data-score="0"] span:nth-child(-n+1),
.skosu-meter[data-score="1"] span:nth-child(-n+1) { background: #e2554f; }
.skosu-meter[data-score="2"] span:nth-child(-n+2) { background: var(--lux-orange); }
.skosu-meter[data-score="3"] span:nth-child(-n+3) { background: #22a05a; }
.skosu-meter[data-score="4"] span { background: #15803d; }
.skosu-rules { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 20px; }
.skosu-rules li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--lux-muted); white-space: nowrap; }
.skosu-rules li:first-child { flex: none; }
.skosu-rules li:last-child { flex: 1 1 auto; }
#skosuStrength { overflow: hidden; text-overflow: ellipsis; }
.skosu-tick { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #b9c2c3; background: #fff; transition: background .15s ease, border-color .15s ease; }
.skosu-rules li.is-ok { color: #15803d; }
.skosu-rules li.is-ok .skosu-tick {
    border-color: #15803d;
    background: #15803d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Show / hide — a real button in the lux-eye spot */
button.lux-eye.skosu-eye { background: none; border: 0; line-height: 1; }
button.lux-eye.skosu-eye i { font-size: 15px; color: inherit; }
button.lux-eye.skosu-eye:hover { color: var(--lux-ink); }

.skosu-page .lux-btn.btn { height: 50px; margin-top: 2px; }

.skosu-turnstile { display: flex; justify-content: center; }
.skosu-turnstile iframe { margin-top: 12px; }

/* Abstract's "did you mean" under the email field */
.skosu-page .lux-link.skosu-suggest { font-size: 13px; text-decoration: underline; }

/* Step 2 (code): the boxes and resend line come from assets/luxfp.css */
.skosu-page #skosuStep2 .lux-ws-line { margin-top: 4px; }
.skosu-code-info { margin-top: 22px; }

/* "Already have an account? Sign in" between two hairlines */
.skosu-signin {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 14px; font-size: 14px; color: var(--lux-muted);
}
.skosu-signin::before, .skosu-signin::after { content: ""; flex: 1; height: 1px; background: var(--lux-line); }
.skosu-signin span { margin-left: 10px; }
.skosu-signin a { margin-right: 10px; font-size: 14px; }

/* -------------------------------------------------------------------------
   Sizes
   ------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-height: 860px) {
    .skosu-lede { font-size: 16px; }
    .skosu-page .skosu-title { font-size: 28px; }
    .skosu-page .skosu-sub { margin-bottom: 14px; }
}
@media (max-width: 991.98px) {
    .skosu-page .skosu-title { font-size: 28px; white-space: normal; }
}
@media (max-width: 520px) {
    .skosu-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .skosu-chips { flex-wrap: wrap; }
    .skosu-chip { flex: 1 1 calc(33.333% - 8px); }
    .skosu-or { flex-basis: 100%; text-align: center; }
    .skosu-chip-solo { flex-basis: 100%; }
    .skosu-rules { flex-wrap: wrap; gap: 4px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .skosu-chip-box, .skosu-meter span, .skosu-tick { transition: none; }
    .skosu-ws-state[data-state="checking"] { animation: none; }
}

/* Skolarli teal panel (see lux.css) */
.lux-aside .skosu-lede { color: var(--lux-panel-text); }