/**
 * Opening page: DRLRL ID entry and Session ID display.
 * Card styling comes from .start-container (layout.css).
 */

.session-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    margin: 0 16px;
    width: calc(100% - 32px);
    max-width: 900px;
    /* Researcher-facing: plain card instead of the storybook sign */
    background: #FFFFFF;
    border: 1px solid #CFD6DE;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20, 30, 45, 0.25);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #1F2A37;
}

.session-login .session-login__title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0;
    font-family: inherit;
    color: #1F2A37;
    text-shadow: none;
    -webkit-text-stroke: 0;
}

.session-login__title-main {
    font-size: clamp(1.5rem, 3.6vw, 2.4rem);
    font-weight: 700;
    white-space: nowrap;
}

.session-login__title-sub {
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    font-weight: 500;
    color: #52606D;
}

.session-login__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.session-login__label {
    font-size: var(--instruction-size);
    font-weight: 600;
    color: #1F2A37;
}

.session-login__input {
    font: inherit;
    font-size: var(--instruction-size);
    padding: 8px 14px;
    width: min(320px, 70vw);
    border: 2px solid #9AA5B1;
    border-radius: 8px;
    background: #fff;
    color: #1F2A37;
}

.session-login__input:focus {
    outline: none;
    border-color: #2196F3;
}

.session-login__input:disabled {
    background: #EAF6EA;
    border-color: #7CC47C;
}

.session-login__error {
    flex-basis: 100%;
    margin: 0;
    color: #C62828;
    font-size: var(--body-size);
}

.session-login__session {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.session-login__id-btn {
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: bold;
    letter-spacing: 0.08em;
    white-space: nowrap;
    padding: 14px 32px;
    color: #FFFFFF;
    background: #1F6FB2;
    border: 2px solid #185A91;
    border-radius: 12px;
    box-shadow: 0 4px 0 #134A77;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.1s;
}

.session-login__id-btn:hover {
    background: #185A91;
}

.session-login__id-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #134A77;
}

.session-login__id-btn--done,
.session-login__id-btn--done:hover {
    color: #1B5E20;
    background: #E3F4E4;
    border-color: #4CAF50;
    box-shadow: none;
    transform: none;
}

.session-login__note {
    margin: 0;
    max-width: 520px;
    color: #3E4C59;
    font-size: var(--body-size);
}

.session-login__begin {
    padding: 14px 40px;
    font: inherit;
    font-size: var(--instruction-size);
    font-weight: 600;
    color: #fff;
    background: #1F2A37;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.session-login__begin:hover {
    background: #111923;
}