/* Intro-page structure. Species palettes remain in their own theme files. */
.portal { padding-block: 2rem 4rem; }
.portal-navigation { border-bottom: 1px solid var(--site-border); }
.portal-tabs { border: 0; gap: 0.5rem; }
.portal-tabs .nav-link {
    position: relative;
    padding: 0.9rem 1.5rem;
    color: var(--site-text-muted);
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--site-font-heading);
    font-size: 1.2rem;
}
.portal-tabs .nav-link.active { color: var(--site-heading); background: none; }
.portal-tabs .nav-link.active::after {
    content: ""; position: absolute; inset: auto 1.5rem -1px; height: 3px; background: var(--site-accent);
}
.portal-tabs .nav-link:disabled { color: var(--site-text-muted); opacity: 0.55; }
.portal-tabs .nav-link:focus-visible { outline: 2px solid var(--site-accent); outline-offset: -3px; }
.portal-content { padding-top: 2.75rem; }
.portal-eyebrow { color: var(--site-link); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; font-weight: 600; margin-bottom: 0.75rem; }
.register-heading, .sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.register-heading h1, .sheet-heading h1 { font-size: clamp(1.8rem, 3vw, 2.75rem); overflow-wrap: anywhere; }
.register-heading p:last-child { margin-bottom: 0; max-width: 42rem; }
.register-create, .register-signin { flex-shrink: 0; }
.register-signin { text-underline-offset: 0.3em; }
.ruleset-register { list-style: none; padding: 0; }
.ruleset-register li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--site-border); }
.ruleset-register h2 { font-size: 1.35rem; }
.ruleset-kind { color: var(--site-link); font-size: 0.8rem; text-align: right; }
.species-choices { display: grid; gap: 0.75rem; }
.species-choice { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--site-border); border-radius: var(--bs-border-radius); cursor: pointer; }
.species-choice:has(input:checked) { border-color: var(--site-accent); background: var(--site-surface-muted); }
.species-choice strong, .species-choice small { display: block; }
.species-choice strong { font-family: var(--site-font-heading); font-size: 1.2rem; }
.species-choice small { color: var(--site-text-muted); }
@media (max-width: 767.98px) {
    .portal { padding-top: 1rem; }
    .portal-tabs { gap: 0; justify-content: space-between; }
    .portal-tabs .nav-link { padding-inline: 0.75rem; font-size: 1.05rem; }
    .portal-tabs .nav-link.active::after { inset-inline: 0.75rem; }
    .portal-content { padding-top: 2rem; }
    .register-heading { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
}

.modal-header .btn-close, .offcanvas-header .btn-close { min-width: 2.75rem; min-height: 2.75rem; }

.ruleset-register li > div { min-width: 0; }
.ruleset-register h2, .ruleset-register p { overflow-wrap: anywhere; }

/* Busy indicator before status text while the server works (reuses Bootstrap's spinner-border keyframes). */
.is-busy::before { content: ''; display: inline-block; width: .85em; height: .85em; margin-right: .4em; vertical-align: -.1em; border: .15em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner-border .75s linear infinite; }
@media (prefers-reduced-motion: reduce) { .is-busy::before { animation-duration: 1.5s; } }