/*
 * Bank preview pages: the Regents exam view (/regents), the Explore bank preview (/explore-bank)
 * and the JMAP bank view (/jmap). Loaded after jmap.css and assign.css, whose older rules these
 * pages still fall back on, so every rule here is scoped to body.bank-view.
 */
body.bank-view {
    background: #F4F7F7;
}

.bank-view .bank-view-main {
    display: flex;
    flex-direction: column;
}

/* Sticky action sidebar beside the exam */
.bank-view .bank-view-layout {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 230px minmax(0, 960px);
    justify-content: center;
    margin: 0 auto;
    padding: 1.5rem 1rem 0;
    width: 100%;
}

.bank-view .bank-view-content {
    min-width: 0;
}

.bank-view .bank-view-side {
    align-self: stretch;
}

/* ── Signed-out welcome ──────────────────────────── */
.bank-view #jmap-header.bank-view-welcome {
    align-items: center;
    background: linear-gradient(135deg, #08727C 0%, #3D7A80 100%);
    border: none;
    box-shadow: none;
    color: #FFFFFF;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 1.5rem;
}

.bank-view .welcome-copy {
    flex: 1 1 22rem;
}

.bank-view #jmap-primary-text {
    color: #FFFFFF;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    text-align: left;
}

.bank-view #jmap-secondary-text {
    color: rgba(255, 255, 255, .9);
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 .5rem;
    text-align: left;
}

.bank-view #jmap-link-text {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: .9rem;
    font-weight: 700;
    margin: 0;
    padding: 0;
    text-decoration: underline;
}

.bank-view .welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.bank-view .jmap-header-btn {
    border-color: #FFFFFF;
    border-radius: 8px;
    font-size: .9rem;
    margin: 0;
    padding: .5rem 1rem;
}

.bank-view .jmap-header-btn.jb-btn-primary {
    background: #FFFFFF;
    color: #08727C;
}

.bank-view .jmap-header-btn:not(.jb-btn-primary) {
    background: transparent;
    color: #FFFFFF;
}

.bank-view .jmap-header-btn:not(.jb-btn-primary):hover {
    background: rgba(255, 255, 255, .12);
}

/* ── Bank header ─────────────────────────────────── */
.bank-view .bank-view-header {
    padding: 1.25rem 1.5rem;
}

.bank-view .bank-view-eyebrow {
    align-items: center;
    color: #08727C;
    display: flex;
    font-size: .78rem;
    font-weight: 700;
    gap: .4rem;
    letter-spacing: .04em;
    margin: 0 0 .35rem;
    text-transform: uppercase;
}

.bank-view #assignment-title {
    font-size: 1.6rem;
    margin: 0;
    text-align: left;
    text-transform: none;
}

.bank-view #jmap-length,
.bank-view #assignment-length {
    background: none;
    border-radius: 0;
    color: #6B6B6B;
    font-size: .9rem;
    font-weight: 400;
    margin: .35rem 0 0;
    padding: 0;
    text-align: left;
}

.bank-view #jmap-length .bank-length,
.bank-view #assignment-length .bank-length {
    color: #1F2933;
    font-weight: 700;
}

/* #sidebar keeps its id; it stays in view under the sticky navbar while the questions scroll */
.bank-view #sidebar {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    position: sticky;
    text-align: left;
    top: calc(58px + 1.5rem);
}

.bank-view .page-btn {
    border-radius: 8px;
    box-shadow: none;
    float: none;
    font-size: .9rem;
    justify-content: flex-start;
    margin: 0;
    padding: .6rem .85rem;
    text-align: left;
    width: 100%;
}

.bank-view .page-btn .bi {
    flex: none;
}

.bank-view .page-btn .label-short {
    display: none;
}

.bank-view .page-btn:not(.jb-btn-primary) {
    background: #FFFFFF;
    color: #08727C;
}

.bank-view .page-btn:not(.jb-btn-primary):hover {
    background: #EEF6F6;
}

/* Tablets and phones: the sidebar becomes a sticky button bar above the questions */
@media (max-width: 991.98px) {
    .bank-view .bank-view-layout {
        gap: 1rem;
        grid-template-columns: minmax(0, 1fr);
    }

    /* One column: the aside is only as tall as the bar, so the aside itself sticks within the page grid */
    .bank-view .bank-view-side {
        position: sticky;
        top: calc(58px + .5rem);
        z-index: 10;
    }

    .bank-view #sidebar {
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(31, 41, 51, .08);
        flex-direction: row;
        padding: .5rem;
        position: static;
    }

    .bank-view .page-btn {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        padding: .55rem .5rem;
        white-space: nowrap;
    }
}

@media (max-width: 575.98px) {
    .bank-view .page-btn .label-long {
        display: none;
    }

    .bank-view .page-btn .label-short {
        display: inline;
    }
}

/* ── Question cards ──────────────────────────────── */
.bank-view .questions {
    background: none;
    border: none;
    border-radius: 0;
    margin: 0;
}

.bank-view .question-box {
    background: #FFFFFF;
    border: 1px solid #E3E8E8;
    border-radius: 12px;
    font-size: .9rem;
    margin: 1rem 0;
    padding: 1.25rem 1.5rem;
}

.bank-view .question {
    align-items: flex-start;
    display: flex;
    gap: .9rem;
    margin: 0;
}

.bank-view .question-label {
    align-items: center;
    background: #EEF6F6;
    border-radius: 8px;
    color: #08727C;
    display: inline-flex;
    flex: none;
    font-size: .9rem;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    margin: .35rem 0 0;
    min-width: 2rem;
    padding: 0 .4rem;
}

.bank-view .tools {
    flex: 1 1 auto;
    min-width: 0;
}

.bank-view .ql-editor {
    color: #1F2933;
    font-size: .95rem;
    line-height: 1.55;
    padding: .4rem 0;
}

.bank-view .ql-editor img {
    display: block;
    height: auto;
    margin: .5rem auto;
    max-width: min(100%, 520px);
}

.bank-view .answers {
    display: block;
    font-size: .9rem;
    margin: .75rem 0 0 2.9rem;
}

.bank-view .choice {
    align-items: flex-start;
    background: #FFFFFF !important;
    border: 1px solid #E3E8E8;
    border-radius: 10px;
    display: flex;
    gap: .75rem;
    margin-bottom: .5rem;
    padding: .45rem .75rem;
}

.bank-view .choice.correct {
    background: #EAF6F0 !important;
    border-color: #2E9E63;
}

.bank-view .answer-label {
    align-items: center;
    border: 1.5px solid #CFDCDD;
    border-radius: 50%;
    color: #4E4E4E;
    display: inline-flex;
    flex: none;
    font-size: .8rem;
    font-weight: 700;
    height: 1.7rem;
    justify-content: center;
    margin: .25rem 0 0;
    width: 1.7rem;
}

.bank-view .choice.correct .answer-label {
    background: #2E9E63;
    border-color: #2E9E63;
    color: #FFFFFF;
}

.bank-view .answer {
    border-radius: 0 !important;
    flex: 1 1 auto;
    font-size: .9rem;
    min-width: 0;
}

.bank-view .choice .ql-editor {
    padding: .3rem 0;
}

.bank-view .correct-icon {
    color: #2E9E63;
    flex: none;
    font-size: 1.1rem;
    margin-top: .3rem;
}

/* Explanation and tags */
.bank-view .explanation {
    background: #F7FAFA;
    border-left: 3px solid #08727C;
    border-radius: 8px;
    margin: 1rem 0 0 2.9rem;
    padding: .6rem 1rem;
}

.bank-view .explanation[hidden] {
    display: none;
}

.bank-view .explanation-label,
.bank-view .tags-text {
    color: #6B6B6B;
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bank-view .explanation .ql-editor {
    font-size: .88rem;
}

.bank-view .tags {
    align-items: center;
    border-top: 1px solid #EEF1F1;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 0;
    padding-top: .75rem;
}

.bank-view .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.bank-view .tag {
    background: #EEF6F6;
    border-radius: 999px;
    color: #3D7A80;
    font-size: .75rem;
    font-weight: 600;
    margin: 0;
    padding: .2rem .65rem;
}

/* Question images (Explore banks) */
.bank-view .gallery {
    margin: .5rem 0 0 2.9rem;
}

.bank-view .gallery:empty {
    display: none;
}

.bank-view .uploaded-image {
    display: block;
    height: auto;
    margin: 0 auto;
    max-height: 30rem;
    max-width: min(100%, 520px);
}

/* ── Footer ──────────────────────────────────────── */
.bank-view .footer {
    align-items: center;
    color: #6B6B6B;
    display: flex;
    flex-wrap: wrap;
    font-size: .85rem;
    gap: .5rem 1.25rem;
    justify-content: center;
    margin: 0;
    padding: 2rem 1rem 2.5rem;
}

.bank-view .footer a {
    color: #3D7A80;
    font-size: .85rem;
    opacity: 1;
}

/* ── Modals ──────────────────────────────────────── */
.bank-view .modal-content {
    border: none;
    border-radius: 16px;
}

.bank-view .modal-body {
    padding: 2rem;
}

.bank-view .modal-header-text,
.bank-view #modal-header-text {
    color: #1F2933;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 .75rem;
    padding: 0;
}

.bank-view .modal-step {
    color: #08727C;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    margin: 0 0 .25rem;
    text-transform: uppercase;
}

.bank-view .modal-body-text {
    color: #4E4E4E;
    font-size: .98rem;
    line-height: 1.5;
}

.bank-view .button-confirm,
.bank-view .button-cancel,
.bank-view #password-confirm,
.bank-view #password-cancel,
.bank-view #reset-confirm {
    border: 1.5px solid #08727C;
    border-radius: 8px;
    font-weight: 700;
    margin: .5rem .25rem 0;
    padding: .5rem 1.25rem;
}

.bank-view .button-confirm,
.bank-view #password-confirm,
.bank-view #reset-confirm {
    background: #08727C;
    color: #FFFFFF;
}

.bank-view .button-cancel,
.bank-view #password-cancel {
    background: #FFFFFF;
    color: #08727C;
}

.bank-view #email-reset {
    border: 1px solid #DCE3E3;
    border-radius: 8px;
    display: block;
    margin: 1rem 0;
    padding: .6rem .75rem;
    width: 100%;
}

/* Welcome carousel (signed out) */
.bank-view #explain-title {
    color: #1F2933;
    font-weight: 700;
}

.bank-view #new-user-modal .jmap-link {
    color: #08727C;
    cursor: pointer;
    font-weight: 700;
    text-decoration: underline;
}

.bank-view #new-user-modal .modal-footer {
    gap: .5rem;
    justify-content: center;
    padding: 1rem 1.5rem 1.5rem;
}

.bank-view #new-user-modal .modal-footer .btn {
    border: 1.5px solid #08727C;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
    padding: .5rem 1.25rem;
}

.bank-view #new-user-modal .btn-explain {
    background: #08727C;
    color: #FFFFFF;
}

.bank-view #new-user-modal .button-cancel {
    background: #FFFFFF;
    color: #08727C;
}

/* Sign in and sign up */
.bank-view .loginmodal-container {
    border-radius: 16px;
    box-shadow: none;
    max-width: none;
    padding: 2rem;
}

.bank-view .loginmodal-container .modal-header-text {
    text-align: left;
}

.bank-view .sign-in-subtitle {
    color: #6B6B6B;
    font-size: .92rem;
    margin: -.4rem 0 1rem;
}

.bank-view #teacher-container label,
.bank-view .login-label {
    color: #1F2933;
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin: .6rem 0 .3rem;
}

.bank-view .password-label-row {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
}

.bank-view .loginmodal-container .forgot-link {
    color: #08727C;
    font-size: .82rem;
    font-weight: 600;
    opacity: 1;
}

.bank-view .loginmodal-container input[type=text],
.bank-view .loginmodal-container input[type=password] {
    border: 1px solid #DCE3E3;
    border-radius: 8px;
    color: #282828;
    font-size: .95rem;
    margin-bottom: .25rem;
    padding: .6rem .75rem;
}

.bank-view .loginmodal-container input[type=text]:focus,
.bank-view .loginmodal-container input[type=password]:focus {
    border-color: #08727C;
    box-shadow: 0 0 0 3px rgba(8, 114, 124, .15);
    outline: none;
}

.bank-view #teacher-submit,
.bank-view #login {
    background: #08727C;
    border-radius: 8px;
    margin: 1rem 0 0;
    padding: .7rem 0;
    width: 100%;
}

.bank-view #teacher-submit:hover,
.bank-view #login:hover {
    background: #06626B;
    text-shadow: none;
}

.bank-view .loginmodal-container .privacy {
    color: #6B6B6B;
    font-size: .85rem;
    margin: 1rem 0 0;
}

.bank-view .loginmodal-container .privacy a {
    color: #08727C;
    font-size: .85rem;
    font-weight: 600;
    opacity: 1;
}

.bank-view .or-container {
    color: #6B6B6B;
    font-size: .85rem;
    margin: 1.1rem 0;
}

.bank-view .line-separator {
    background-color: #E3E8E8;
}

.bank-view #google-login.google-btn,
.bank-view #google-signup.google-btn {
    align-items: center;
    max-width: none;
    background: #FFFFFF;
    border: 1px solid #DCE3E3;
    border-radius: 8px;
    color: #1F2933;
    display: flex;
    font-size: .95rem;
    font-weight: 600;
    gap: .6rem;
    justify-content: center;
    padding: .6rem;
    width: 100%;
}

.bank-view .google-btn:hover {
    background: #FAFCFC;
    border-color: #CFDCDD;
}

.bank-view .google-btn:disabled {
    opacity: .6;
}

/* Create class (step 2) inputs and class list */
.bank-view #class-name,
.bank-view #subject {
    background: #FFFFFF;
    border: 1px solid #DCE3E3;
    border-radius: 8px;
    display: block;
    font-size: .95rem;
    margin: .75rem auto;
    max-width: 24rem;
    padding: .6rem .75rem;
    width: 100%;
}

.bank-view #class-name:focus,
.bank-view #subject:focus {
    border-color: #08727C;
    box-shadow: 0 0 0 3px rgba(8, 114, 124, .15);
    outline: none;
}

.bank-view .my-class {
    background: #EEF6F6;
    border-radius: 8px;
    color: #1F2933;
    font-size: .95rem;
    margin: .5rem auto;
    max-width: 24rem;
    padding: .6rem 1rem;
    text-align: left;
}

.bank-view #my-classes-header {
    color: #6B6B6B;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    margin: 1rem 0 .5rem;
    text-transform: uppercase;
}

.bank-view .google-logo {
    height: 1.1rem;
    margin-right: .5rem;
    vertical-align: -.2em;
}

/* Share modal */
.bank-view #share-bank-modal .modal-body {
    text-align: center;
}

.bank-view .share-body-text {
    color: #4E4E4E;
    font-size: .98rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}

.bank-view #share-link {
    background: #F7FAFA;
    border: 1px solid #E3E8E8;
    border-radius: 8px;
    color: #1F2933;
    font-size: .85rem;
    margin: 0 0 .5rem;
    overflow-wrap: anywhere;
    padding: .6rem .75rem;
    text-align: left;
}

.bank-view #copy-share-link #copy-link {
    color: inherit;
}

.bank-view .invite-icon {
    margin-right: .35rem;
}

/* Return to JMAP modal */
.bank-view .jmap-exit-links {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 1rem auto;
    max-width: 20rem;
}

.bank-view .jmap-exit-links .jb-btn {
    justify-content: flex-start;
    padding: .6rem 1rem;
}

/* ── Phones ──────────────────────────────────────── */
@media (max-width: 575.98px) {
    .bank-view .bank-view-layout {
        padding: .75rem .75rem 0;
    }

    .bank-view .bank-view-header,
    .bank-view .bank-view-welcome {
        padding: 1rem;
    }

    .bank-view #assignment-title {
        font-size: 1.3rem;
    }

    .bank-view .welcome-actions {
        width: 100%;
    }

    .bank-view .welcome-actions .jmap-header-btn {
        flex: 1 1 auto;
        white-space: nowrap;
    }

    .bank-view .question-box {
        padding: 1rem;
    }

    .bank-view .question {
        gap: .6rem;
    }

    .bank-view .answers,
    .bank-view .explanation {
        margin-left: 0;
    }

    .bank-view .loginmodal-container,
    .bank-view .modal-body {
        padding: 1.5rem 1.25rem;
    }
}