/* Shiny Latex — chrome-and-gloss theme layered over base.css.
   Scoped to .shinylatex-page so nothing leaks into the Institute or other
   Wings. The palette swaps the Institute's gold for cold chrome and its
   ceremonial red for a deep violet; gloss accents suggest the material
   without turning the layout into a costume. */

.shinylatex-page {
    --bg: #08090b;
    --bg-soft: #0e1013;
    --panel: #eef0f4;
    --panel-muted: #c9d0d9;
    --panel-dark: #101318;
    --ink: #0c0e11;
    --ink-muted: #5b6470;
    --gold: #aab6c4;
    --gold-soft: rgba(170, 182, 196, 0.22);
    --red: #4b2470;
    --red-soft: #9a6ad1;
    --cream: #f2f4f7;
    --line: rgba(170, 182, 196, 0.38);
}

/* Specular sheen on the page's serif headings: light catching a curve. */
.shinylatex-page .page-hero h1,
.shinylatex-page .ritual-divider {
    background: linear-gradient(115deg, #f2f4f7 0%, #ffffff 38%, #aab6c4 52%, #f2f4f7 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Glossy primary command: a wet highlight along the top edge. */
.shinylatex-page .official-command:not(.ghost),
.shinylatex-page .button.primary {
    position: relative;
    overflow: hidden;
}
.shinylatex-page .official-command:not(.ghost)::after,
.shinylatex-page .button.primary::after {
    content: "";
    position: absolute;
    inset: 0 0 55% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* Registry member cards: portrait with a soft specular band. */
.shinylatex-page .latex-member-card {
    position: relative;
    overflow: hidden;
}
.shinylatex-page .latex-member-portrait {
    position: relative;
    margin: 0 0 14px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--bg-soft);
}
.shinylatex-page .latex-member-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.shinylatex-page .latex-member-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0) 58%);
    pointer-events: none;
}
.shinylatex-page .latex-member-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--gold);
    font: 900 0.68rem/1.4 "Segoe UI", Inter, Arial, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Single-enrollment form. */
.shinylatex-page .latex-enroll-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}
.shinylatex-page .latex-enroll-form {
    display: grid;
    gap: 16px;
}
.shinylatex-page .latex-enroll-form label > span:first-child,
.shinylatex-page .latex-enroll-form legend {
    display: block;
    margin-bottom: 6px;
    color: var(--gold);
    font: 900 0.66rem/1.35 "Segoe UI", Inter, Arial, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.shinylatex-page .latex-enroll-form input[type="text"],
.shinylatex-page .latex-enroll-form select,
.shinylatex-page .latex-enroll-form textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 10px 12px;
    background: #fdfdfe;
    color: var(--ink);
    font: 500 0.95rem/1.4 "Segoe UI", Inter, Arial, sans-serif;
}
.shinylatex-page .latex-enroll-form textarea {
    resize: vertical;
    min-height: 70px;
}
.shinylatex-page .latex-enroll-form input:focus,
.shinylatex-page .latex-enroll-form select:focus,
.shinylatex-page .latex-enroll-form textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-soft);
}
.shinylatex-page .latex-signal-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.shinylatex-page .latex-signal-grid label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 13px;
    color: var(--cream);
    font: 600 0.85rem/1 "Segoe UI", Inter, Arial, sans-serif;
    cursor: pointer;
}
.shinylatex-page .latex-signal-grid label:has(input:checked) {
    border-color: var(--gold);
    background: var(--gold-soft);
}
.shinylatex-page .latex-enroll-status {
    margin: 0;
    min-height: 1.3em;
    color: var(--red-soft);
    font: 700 0.9rem/1.4 "Segoe UI", Inter, Arial, sans-serif;
}
.shinylatex-page .latex-enroll-aside {
    position: sticky;
    top: 20px;
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: clamp(18px, 2.4vw, 26px);
    background: var(--panel-dark);
}
.shinylatex-page .latex-enroll-aside h3 {
    color: var(--cream);
}
.shinylatex-page .latex-preview-grid {
    display: grid;
    gap: 8px;
}
.shinylatex-page .latex-preview-grid > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--gold-soft);
    padding-top: 8px;
}
.shinylatex-page .latex-preview-grid span {
    color: var(--gold);
    font: 900 0.62rem/1.5 "Segoe UI", Inter, Arial, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.shinylatex-page .latex-preview-grid strong {
    color: var(--panel-muted);
    font: 700 0.85rem/1.4 "Segoe UI", Inter, Arial, sans-serif;
    text-align: right;
}

@media (max-width: 860px) {
    .shinylatex-page .latex-enroll-layout {
        grid-template-columns: 1fr;
    }
    .shinylatex-page .latex-enroll-aside {
        position: static;
    }
}