/* Shared across every page: generic form/notice/tab/button primitives (for
   pages that don't already define their own, eg. home.css-based pages) plus
   the log in / create account modal itself. Pages with their own dedicated
   stylesheet (mortar.css, account.css, etc.) that already define these same
   class names should link this file BEFORE their own, so their existing
   styling wins any cascade ties and only the modal picks up these rules. */

.hidden {
    display: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form-row {
    margin-bottom: 16px;
}

label {
    display: block;
    font-weight: 800;
    margin-bottom: 7px;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid #3d4358;
    background: #11131a;
    color: #fff;
    border-radius: 10px;
    padding: 12px 13px;
    font-size: 15px;
    font-family: inherit;
}

button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #ffbd66;
    color: #11131a;
    font-weight: 900;
    border-radius: 10px;
    padding: 13px 18px;
    cursor: pointer;
    font-size: 15px;
}

button:hover,
.button:hover {
    background: #ffd08a;
}

.small-button {
    padding: 9px 12px;
    font-size: 13px;
}

.notice {
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.notice.success {
    background: #1f3525;
    border: 1px solid #3a7c49;
    color: #d5f5dc;
}

.notice.error {
    background: #3a1f1f;
    border: 1px solid #8c3c3c;
    color: #ffd2d2;
}

.notice.info {
    background: #1f2a3a;
    border: 1px solid #3c6a8c;
    color: #d2ecff;
}

.tab-bar {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    border-bottom: 1px solid #303546;
}

.tab-button {
    background: transparent;
    color: #aeb3c1;
    font-weight: 800;
    font-size: 15px;
    padding: 10px 2px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    cursor: pointer;
}

.tab-button:hover {
    background: transparent;
    color: #f5f5f5;
}

.tab-button.is-active {
    color: #ffbd66;
    border-bottom-color: #ffbd66;
}

/* --- Auth modal --- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 7, 11, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.modal-overlay.hidden {
    display: none;
}

.modal {
    position: relative;
    background: #1c1f2a;
    border: 1px solid #303546;
    border-radius: 16px;
    padding: 28px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    color: #f5f5f5;
}

.modal .muted {
    color: #aeb3c1;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    color: #aeb3c1;
    border: 0;
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
}

.modal-close:hover {
    background: transparent;
    color: #f4f4f4;
}