/*
|--------------------------------------------------------------------------
| Rankly sign-in page
|--------------------------------------------------------------------------
|
| Loaded only by index.php. Every rule is scoped under body.signin, so the
| create-administrator page (style.css) and the application (app.css) are
| unaffected.
|
| Sized compactly so the whole screen fits a typical laptop without looking
| zoomed in; the application pages use the same denser scale.
|
| 1. Tokens + base
| 2. Shell
| 3. Brand panel (left)
| 4. Sample preview card
| 5. Feature strip
| 6. Sign-in panel (right)
| 7. Fields + button
| 8. Messages
| 9. Responsive
| 10. Reduced motion
|
*/

/* ==========================================================================
   1. Tokens + base
   ========================================================================== */

.signin {
    --page: #f1f6fc;
    --navy: #071d35;
    --ink: #0b1a2e;
    --ink-soft: #55657b;
    --muted: #667085;
    --blue: #0866f9;
    --blue-hover: #0759dc;
    --blue-press: #064fc4;
    --blue-light: #7cb6ff;
    --field: #f7f9fc;
    --field-border: #d5deea;
    --field-hover: #b6c4d6;
    --line: #e3e9f1;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --speed: 180ms;

    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 16px;
    color: var(--ink);
    background: var(--page);
    font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    color-scheme: light;
}

.signin *,
.signin *::before,
.signin *::after {
    box-sizing: border-box;
}

/* :where() keeps these resets at zero specificity, so the component rules
   below set margins and fonts without needing to out-rank them. */
:where(.signin) :where(h1, p, ul) {
    margin: 0;
}

:where(.signin) :where(button, input) {
    font: inherit;
}

.signin a:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   2. Shell
   ========================================================================== */

.signin-shell {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    min-height: calc(100vh - 32px);
    min-height: calc(100dvh - 32px);
    overflow: hidden;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 38, 70, 0.04);
}

/* ==========================================================================
   3. Brand panel (left)
   ========================================================================== */

.signin-brand {
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 3.4vh, 32px);
    overflow: hidden;
    padding: clamp(22px, 4vh, 36px) clamp(28px, 3.2vw, 48px);
    border-radius: 16px;
    color: #ffffff;
    background:
        radial-gradient(
            60% 55% at 95% 0%,
            rgba(33, 112, 255, 0.3),
            transparent 70%
        ),
        radial-gradient(
            55% 40% at 0% 100%,
            rgba(30, 78, 150, 0.32),
            transparent 70%
        ),
        linear-gradient(165deg, #0a2443 0%, var(--navy) 55%, #061a31 100%);
}

/* Faint grid, strongest near the glow and fading out toward the text. */
.signin-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(75% 65% at 90% 5%, #000 0%, transparent 78%);
    mask-image: radial-gradient(75% 65% at 90% 5%, #000 0%, transparent 78%);
}

.signin-logo {
    display: flex;
    align-items: center;
    gap: 11px;
}

.signin-logo-mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(150deg, #2d88ff 0%, var(--blue) 60%, #0657d8 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
}

.signin-logo-copy {
    display: grid;
    gap: 4px;
}

.signin-logo-copy strong {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.signin-logo-copy small {
    color: #a9bdd4;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.signin-brand-body {
    margin: auto 0;
}

.signin-brand-eyebrow {
    color: #4f9cff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.signin-headline {
    margin-top: clamp(8px, 1.4vh, 12px);
    color: #ffffff;
    font-size: clamp(28px, min(6.6cqi, 5.8vh), 48px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.04em;
}

.signin-headline span {
    display: block;
}

.signin-headline span + span {
    color: var(--blue-light);
}

.signin-lede {
    max-width: 27em;
    margin-top: clamp(10px, 1.8vh, 16px);
    color: #adbfd4;
    font-size: clamp(13.5px, min(2.5cqi, 1.9vh), 16px);
    line-height: 1.55;
    text-wrap: balance;
}

/* ==========================================================================
   4. Sample preview card
   ========================================================================== */

.signin-preview {
    max-width: 560px;
    margin-top: clamp(16px, 3vh, 26px);
    overflow: hidden;
    border: 1px solid rgba(148, 184, 230, 0.16);
    border-radius: 12px;
    background: rgba(13, 38, 68, 0.72);
}

.signin-preview-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(8px, 1.3vh, 11px) 18px;
    border-bottom: 1px solid rgba(148, 184, 230, 0.12);
    background: rgba(255, 255, 255, 0.025);
}

.signin-preview-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: #4f9cff;
    background: rgba(47, 128, 255, 0.18);
}

.signin-preview-icon svg {
    width: 16px;
    height: 16px;
}

.signin-preview-head strong {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.signin-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 3px 9px;
    border: 1px solid rgba(148, 184, 230, 0.18);
    border-radius: 999px;
    color: #d0dcea;
    background: rgba(255, 255, 255, 0.05);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.signin-preview-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
}

.signin-preview-body {
    padding: 0 16px clamp(2px, 0.4vh, 4px);
}

.signin-preview-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.signin-preview-table th,
.signin-preview-table td {
    padding: 0 8px;
    text-align: left;
    white-space: nowrap;
}

.signin-preview-table th {
    height: clamp(28px, 3.8vh, 34px);
    color: #8ea6c2;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.signin-preview-table td {
    height: clamp(30px, 4.2vh, 38px);
    overflow: hidden;
    border-top: 1px solid rgba(148, 184, 230, 0.11);
    color: #e7eef7;
    font-size: 13px;
    text-overflow: ellipsis;
}

.signin-preview-table th:nth-child(1) {
    width: 30%;
}

.signin-preview-table th:nth-child(2) {
    width: 17%;
}

.signin-preview-table th:nth-child(3) {
    width: 21%;
}

.signin-change {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.signin-change svg {
    width: 9px;
    height: 9px;
}

.signin-change.is-up {
    color: #3ddc97;
}

.signin-change.is-down {
    color: #f47c84;
}

.signin-change.is-flat {
    color: #93a7bf;
}

.signin-spark {
    display: block;
    width: 100%;
    max-width: 120px;
    height: 20px;
    overflow: visible;
}

.signin-spark path {
    fill: none;
    stroke: #3b8bff;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Narrow panels: drop the trend column rather than squeeze every column. */
@container (max-width: 400px) {
    .signin-preview-table th:nth-child(4),
    .signin-preview-table td:nth-child(4) {
        display: none;
    }
}

/* ==========================================================================
   5. Feature strip
   ========================================================================== */

.signin-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 560px;
    padding: 0;
    list-style: none;
}

.signin-features li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 2px 10px;
    color: #d3deeb;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}

.signin-features li:first-child {
    justify-content: flex-start;
    padding-left: 0;
}

.signin-features li + li {
    border-left: 1px solid rgba(148, 184, 230, 0.16);
}

.signin-features svg {
    flex: none;
    width: 17px;
    height: 17px;
    color: #4f9cff;
}

/* Narrow panels: stack icon over label so the labels stay on one line. */
@container (max-width: 400px) {
    .signin-features li,
    .signin-features li:first-child {
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 2px 6px;
        font-size: 11.5px;
        text-align: center;
    }

    .signin-features svg {
        width: 16px;
        height: 16px;
    }
}

/* ==========================================================================
   6. Sign-in panel (right)
   ========================================================================== */

.signin-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(18px, 3.4vh, 32px) clamp(24px, 3.2vw, 48px) clamp(14px, 2.4vh, 20px);
    background: #ffffff;
}

.signin-form-wrap {
    width: min(380px, 100%);
    margin: auto 0;
    padding: 14px 0;
}

/* Shown on small screens, where the brand panel is hidden. */
.signin-logo-compact {
    display: none;
}

.signin-logo-compact .signin-logo-copy strong {
    color: var(--ink);
}

.signin-logo-compact .signin-logo-copy small {
    color: #6a7a90;
}

.signin-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1.5px solid #6ea8ff;
    border-radius: 10px;
    color: var(--blue);
    background: #f3f8ff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.signin-eyebrow {
    margin-top: clamp(12px, 2vh, 16px);
    color: var(--blue);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.signin-title {
    margin-top: 6px;
    color: var(--ink);
    font-size: clamp(24px, 2.1vw, 30px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.signin-subtitle {
    margin-top: 6px;
    color: var(--ink-soft);
    font-size: 14px;
}

/* Zero-basis rules give the text its full width first; the lines take
   whatever is left instead of forcing the sentence onto two lines. */
.signin-help {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: clamp(18px, 3vh, 24px);
    color: #3f4f65;
    font-size: 12.5px;
    text-align: center;
}

.signin-help::before,
.signin-help::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--line);
}

.signin-footnote {
    margin-top: 14px;
    color: var(--muted);
    font-size: 11.5px;
    text-align: center;
}

/* ==========================================================================
   7. Fields + button
   ========================================================================== */

.signin-form {
    display: grid;
    gap: 14px;
    margin-top: clamp(18px, 3vh, 24px);
}

.signin-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.signin-control {
    position: relative;
}

.signin-control input {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 12px 0 40px;
    border: 1px solid var(--field-border);
    border-radius: 10px;
    color: var(--ink);
    background: var(--field);
    font-size: 14px;
    font-weight: 500;
    transition:
        border-color var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease),
        background-color var(--speed) var(--ease);
    -webkit-appearance: none;
    appearance: none;
}

.signin-control.has-toggle input {
    padding-right: 46px;
}

.signin-control input::placeholder {
    color: #7b889a;
    opacity: 1;
}

.signin-control input:hover {
    border-color: var(--field-hover);
}

.signin-control input:focus {
    outline: none;
    border-color: var(--blue);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(8, 102, 249, 0.2);
}

.signin-control-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 17px;
    height: 17px;
    color: #6b7b90;
    pointer-events: none;
    transform: translateY(-50%);
    transition: color var(--speed) var(--ease);
}

.signin-control:focus-within .signin-control-icon {
    color: var(--blue);
}

.signin-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #5b6b80;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        background-color var(--speed) var(--ease),
        color var(--speed) var(--ease);
}

.signin-toggle:hover {
    color: var(--ink);
    background: #e9f0f9;
}

.signin-toggle:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 0;
}

.signin-toggle svg {
    width: 18px;
    height: 18px;
}

.signin-toggle .icon-eye-off,
.signin-toggle[aria-pressed="true"] .icon-eye {
    display: none;
}

.signin-toggle[aria-pressed="true"] .icon-eye-off {
    display: block;
}

.signin-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 44px;
    margin-top: 4px;
    padding: 0 16px 0 18px;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    background: var(--blue);
    box-shadow: 0 6px 14px -6px rgba(8, 102, 249, 0.55);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease),
        transform var(--speed) var(--ease);
}

.signin-submit svg {
    flex: none;
    width: 18px;
    height: 18px;
    transition: transform var(--speed) var(--ease);
}

.signin-submit:hover:not(:disabled) {
    background: var(--blue-hover);
    box-shadow: 0 8px 18px -6px rgba(8, 102, 249, 0.6);
}

.signin-submit:hover:not(:disabled) svg {
    transform: translateX(2px);
}

.signin-submit:active:not(:disabled) {
    background: var(--blue-press);
    box-shadow: 0 3px 8px -4px rgba(8, 102, 249, 0.55);
    transform: translateY(1px);
}

.signin-submit:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

.signin-submit:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

.signin-submit[aria-busy="true"] {
    cursor: progress;
    opacity: 0.8;
}

/* ==========================================================================
   8. Messages
   ========================================================================== */

.signin-alert {
    margin-top: 16px;
    padding: 9px 12px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.signin-alert + .signin-alert {
    margin-top: 10px;
}

.signin-alert.is-error {
    border-color: #f9c9cb;
    color: #b42318;
    background: #fef3f2;
}

.signin-alert.is-success {
    border-color: #b5e8cd;
    color: #067647;
    background: #ecfdf3;
}

.signin-alert.is-info {
    border-color: #c6dafc;
    color: #1b4ca8;
    background: #eff5ff;
}

.signin-alert a {
    color: var(--blue-hover);
    font-weight: 700;
    text-underline-offset: 2px;
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

/* Tablet and small laptops: tighter spacing, form column keeps its width. */
@media (max-width: 1199.98px) {
    .signin {
        padding: 12px;
    }

    .signin-shell {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
        min-height: calc(100vh - 24px);
        min-height: calc(100dvh - 24px);
    }

    .signin-brand {
        padding: clamp(20px, 3.6vh, 30px) 28px;
    }

    .signin-panel {
        padding-inline: 28px;
    }
}

/* Single column: the form comes first, the decorative panel is dropped. */
@media (max-width: 899.98px) {
    .signin {
        padding: 0;
        background: #ffffff;
    }

    .signin-shell {
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0;
        box-shadow: none;
    }

    .signin-brand,
    .signin-mark {
        display: none;
    }

    .signin-panel {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 24px 24px 18px;
    }

    .signin-logo-compact {
        display: flex;
    }

    .signin-eyebrow {
        margin-top: 24px;
    }

    .signin-title {
        font-size: clamp(24px, 6.4vw, 30px);
    }

    /* 16px stops iOS Safari zooming the page when a field is focused. */
    .signin-control input {
        height: 46px;
        font-size: 16px;
    }

    .signin-submit {
        height: 46px;
        font-size: 15px;
    }
}

@media (max-width: 479.98px) {
    .signin-panel {
        padding: 20px 20px 16px;
    }
}

/* ==========================================================================
   10. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .signin *,
    .signin *::before,
    .signin *::after {
        transition-duration: 0.01ms !important;
    }

    .signin-submit:active:not(:disabled),
    .signin-submit:hover:not(:disabled) svg {
        transform: none;
    }
}