/* Project form panel, internal scrolling region, and section layout. */

.eyebrow {
    margin: 0;
    color: var(--color-brand-deep);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.request-intro .eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

.request-form-panel {
    display: flex;
    height: 100vh;
    min-height: 0;
    padding: 0 clamp(2rem, 4vw, 4.75rem);
    overflow: hidden;
    align-items: stretch;
    background: var(--color-surface);
}

.request-form-panel__inner {
    display: flex;
    width: min(100%, 52rem);
    height: 100%;
    min-height: 0;
    margin-inline: auto;
    flex-direction: column;
}

.project-form {
    position: relative;
    display: grid;
    min-height: 0;
    overflow: hidden;
    flex: 1;
    grid-template-rows: minmax(0, 1fr) auto;
}

/* The form panel uses a viewport-contained layout with an independantly scrollable
   field region and a stationary action bar at the bottom. The native scrollbar is
   hidden in favour of a custom draggable one (.project-form__scrollbar) because the
   native scrollbar would overlap the form content and interfere with the design. */
.project-form__scroll {
    display: grid;
    min-height: 0;
    padding-block: clamp(2rem, 4vw, 4.75rem);
    padding-right: 2rem;
    margin-right: -1rem;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 1.45rem;
    /* Hide native scrollbar in Firefox and Chrome/Safari respectively. */
    scrollbar-width: none;
}

.project-form__scroll::-webkit-scrollbar {
    display: none;
}

.project-form__scrollbar {
    position: absolute;
    z-index: 3;
    top: 0.75rem;
    right: 0.15rem;
    bottom: 7rem;
    width: 0.375rem;
    background: #e1e5e9;
    border-radius: 999px;
    cursor: default;
}

.project-form__scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--scroll-thumb-height, 3rem);
    background: #8c8c8c;
    border-radius: inherit;
    transform: translateY(var(--scroll-thumb-offset, 0));
    cursor: grab;
    touch-action: none;
}

.project-form__scrollbar-thumb--dragging {
    cursor: grabbing;
}