/* ==========================================================================
   NUBCC — Committee structure page (3D org chart)
   Loaded only on /committee. Depends on the tokens in app.css.
   ========================================================================== */

.hero--committee { padding-bottom: 58px; }

.hero__gradient {
    background: linear-gradient(100deg, var(--accent-300), #ffffff 55%, var(--brand-300));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.hero__chip--link { text-decoration: none; transition: background .18s var(--ease), border-color .18s var(--ease); }
.hero__chip--link:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .38);
    text-decoration: none; color: #fff;
}

/* ==========================================================================
   3D mountain scene
   ========================================================================== */

.scene3d {
    position: relative;
    width: 100%;
    /* Taller when the scene is the whole page; the modifier is dropped when the
       detailed chart is shown underneath. */
    height: clamp(460px, 86vh, 940px);
    background: linear-gradient(180deg, #a8c9ea, #cfe0f0);
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}
.scene3d canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .8s var(--ease);
    touch-action: none; /* let OrbitControls handle touch gestures */
}
.scene3d.is-ready canvas { opacity: 1; }
/* Leave room for the chart when it is shown below. */
.scene3d--with-chart { height: clamp(460px, 74vh, 780px); }

/* Loading state */
.scene3d__loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 11px;
    color: var(--brand-900); font-size: .9rem; font-weight: 600;
    transition: opacity .5s var(--ease);
}
.scene3d.is-ready .scene3d__loading,
.scene3d.is-unavailable .scene3d__loading { opacity: 0; pointer-events: none; }
.scene3d__spinner {
    width: 20px; height: 20px; flex: none;
    border: 2.5px solid rgba(26, 33, 88, .25);
    border-top-color: var(--brand-700);
    border-radius: 50%;
    animation: scene-spin .8s linear infinite;
}
@keyframes scene-spin { to { transform: rotate(360deg); } }

/* Fallback when WebGL is missing */
.scene3d__fallback {
    position: absolute; inset: 0;
    display: none; align-items: center; justify-content: center; gap: 10px;
    padding: 24px; text-align: center;
    background: var(--ink-50); color: var(--ink-600); font-size: .9rem;
}
.scene3d.is-unavailable { height: auto; }
.scene3d.is-unavailable canvas,
.scene3d.is-unavailable .scene3d__hud { display: none; }
.scene3d.is-unavailable .scene3d__fallback { display: flex; position: static; }

/* HUD */
.scene3d__hud {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 16px 20px;
    background: linear-gradient(180deg, transparent, rgba(8, 12, 32, .55));
    pointer-events: none;
}
.scene3d__hint {
    margin: 0; max-width: 46ch;
    color: rgba(255, 255, 255, .92);
    font-size: .8rem; font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.scene3d__buttons { display: flex; gap: 8px; flex-wrap: wrap; pointer-events: auto; }
.scene3d__btn {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    backdrop-filter: blur(10px);
    box-shadow: none;
}
.scene3d__btn:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.scene3d__btn[aria-pressed="false"] { opacity: .6; }

/* Sun elevation — drives the sky, the light colour and the exposure */
.scene3d__sun {
    display: flex; align-items: center; gap: 10px;
    pointer-events: auto;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(10px);
    color: #fff;
}
.scene3d__sun-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.scene3d__sun input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 132px; height: 4px; border-radius: 999px; margin: 0;
    background: linear-gradient(90deg, #ff9a4d, #ffe9a8 45%, #cfe6ff);
    cursor: pointer;
}
.scene3d__sun input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid rgba(0, 0, 0, .25);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.scene3d__sun input[type="range"]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid rgba(0, 0, 0, .25);
}
.scene3d.is-touring #scene3dTour { background: var(--accent-500); border-color: var(--accent-500); color: #04222b; }

/* One-by-one visit panel */
.visit {
    position: absolute; z-index: 4;
    left: 20px; top: 20px;
    width: min(300px, calc(100% - 40px));
    padding: 15px 17px;
    border-radius: var(--radius);
    background: rgba(10, 14, 36, .84);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lg);
    color: #fff;
    display: none;
    animation: visit-in .28s var(--ease);
}
.scene3d.is-visiting .visit { display: block; }
.scene3d.is-visiting #scene3dVisitStart { background: var(--accent-500); border-color: var(--accent-500); color: #04222b; }

@keyframes visit-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.visit__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.visit__count {
    font-family: var(--mono); font-size: .72rem; font-weight: 700;
    color: #04222b; background: var(--accent-400);
    border-radius: 999px; padding: 2px 9px;
}
.visit__tier {
    font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.visit__title { margin: 0 0 13px; font-size: 1rem; font-weight: 700; line-height: 1.35; }

.visit__controls { display: flex; align-items: center; gap: 7px; }
.visit__btn {
    flex: none;
    min-width: 36px; height: 34px;
    padding: 0 11px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font: inherit; font-size: .95rem; font-weight: 700;
    cursor: pointer;
    transition: background .16s var(--ease), border-color .16s var(--ease);
}
.visit__btn:hover { background: rgba(255, 255, 255, .22); }
.visit__btn--play { font-size: .78rem; }
.visit__btn--exit { margin-left: auto; font-size: .78rem; font-weight: 600; }

.visit__hint { margin: 11px 0 0; font-size: .68rem; color: rgba(255, 255, 255, .5); }

@media (max-width: 760px) {
    .visit { left: 12px; right: 12px; top: 12px; width: auto; padding: 12px 14px; }
    .visit__hint { display: none; }
}

/* Hover tooltip */
.scene3d__tip {
    position: absolute; z-index: 3;
    transform: translate(-50%, calc(-100% - 16px));
    display: none; flex-direction: column; gap: 2px;
    padding: 8px 12px; border-radius: 10px;
    background: rgba(10, 14, 36, .92);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff; pointer-events: none; white-space: nowrap;
    box-shadow: var(--shadow-md);
}
.scene3d__tip.is-on { display: flex; }
.scene3d__tip strong { font-size: .85rem; font-weight: 700; }
.scene3d__tip span { font-size: .74rem; color: rgba(255, 255, 255, .7); }

@media (max-width: 760px) {
    .scene3d { height: clamp(380px, 62vh, 560px); }
    .scene3d__hint { display: none; }
    .scene3d__hud { justify-content: center; padding: 12px; }
}

.org {
    padding: 8px 0 64px;
    /* One shared scene so every card tilts toward the same vanishing point. */
    perspective: 1700px;
    perspective-origin: 50% 28%;
}

/* ==========================================================================
   Rotating 3D figure
   ========================================================================== */

.fig3d {
    position: relative;
    width: var(--fig, 72px);
    height: var(--fig, 72px);
    margin: 0 auto 14px;
    perspective: 620px;
}
.fig3d--sm { --fig: 40px; margin-bottom: 0; }
.fig3d--md { --fig: 72px; }
.fig3d--lg { --fig: 104px; }

.fig3d__spin {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    animation: fig-spin 11s linear infinite;
}

/* Slices stacked along Z give the disc real thickness while it turns. */
.fig3d__slice {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--brand-500), var(--brand-800));
    transform: translateZ(calc((var(--i) - 4) * 1.4px));
    backface-visibility: hidden;
}
.fig3d--sm .fig3d__slice { transform: translateZ(calc((var(--i) - 4) * .8px)); }
.fig3d--lg .fig3d__slice { transform: translateZ(calc((var(--i) - 4) * 1.9px)); }

.fig3d__face {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    backface-visibility: hidden;
}
.fig3d__face svg { width: 58%; height: 58%; }

.fig3d__face--front {
    transform: translateZ(6.4px);
    background: linear-gradient(150deg, #f4f6ff, #dfe4fb);
    color: var(--brand-800);
    box-shadow: inset 0 -6px 14px rgba(26, 33, 88, .16);
}
.fig3d__face--back {
    transform: rotateY(180deg) translateZ(6.4px);
    background: linear-gradient(150deg, var(--brand-700), var(--brand-900));
    color: rgba(255, 255, 255, .92);
}
.fig3d--sm .fig3d__face--front { transform: translateZ(3.6px); }
.fig3d--sm .fig3d__face--back { transform: rotateY(180deg) translateZ(3.6px); }
.fig3d--lg .fig3d__face--front { transform: translateZ(8.6px); }
.fig3d--lg .fig3d__face--back { transform: rotateY(180deg) translateZ(8.6px); }

.fig3d__shadow {
    position: absolute;
    left: 50%; bottom: -9px;
    width: 62%; height: 9px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(17, 22, 58, .3), transparent 70%);
    animation: fig-shadow 11s ease-in-out infinite;
}

@keyframes fig-spin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}
/* Shadow narrows as the disc turns edge-on, selling the rotation. */
@keyframes fig-shadow {
    0%, 50%, 100% { transform: translateX(-50%) scaleX(1); opacity: .85; }
    25%, 75% { transform: translateX(-50%) scaleX(.35); opacity: .45; }
}

/* Slow the spin down while a card is being inspected. */
.pcard:hover .fig3d__spin,
.acard:hover .fig3d__spin { animation-duration: 26s; }

/* ==========================================================================
   Tiers
   ========================================================================== */

.tier { position: relative; padding: 26px 0; }

.tier__connector { display: flex; justify-content: center; height: 46px; margin-top: -26px; }
.tier__connector span {
    position: relative;
    width: 2px; height: 100%;
    border-radius: 2px;
    background: linear-gradient(180deg, transparent, var(--brand-300) 35%, var(--brand-500));
}
.tier__connector span::after {
    content: "";
    position: absolute; bottom: -4px; left: 50%;
    transform: translateX(-50%);
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--brand-500);
    box-shadow: 0 0 0 5px rgba(63, 76, 184, .16);
}

.tier__head { display: flex; align-items: center; gap: 14px; margin: 24px 0 22px; }
.tier__rank {
    flex: none;
    font-family: var(--mono); font-size: .82rem; font-weight: 700;
    color: var(--brand-700);
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: 9px; padding: 5px 10px;
}
.tier__title { margin: 0; font-size: 1.3rem; letter-spacing: -.025em; }
.tier__subtitle { margin: 1px 0 0; font-size: .84rem; color: var(--ink-500); }
.tier__count {
    margin-left: auto; flex: none;
    font-size: .76rem; font-weight: 700; color: var(--ink-500);
    background: var(--ink-100); border-radius: 999px; padding: 4px 12px;
}
.tier--spotlight .tier__head { justify-content: center; }
.tier--spotlight .tier__count { margin-left: 0; }

.tier__body--grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    align-items: start;
}
.tier__body--spotlight { display: flex; justify-content: center; }

/* ==========================================================================
   Position card
   ========================================================================== */

.pgroup {
    display: flex; flex-direction: column; align-items: stretch;
    /* Entrance state; .is-visible releases it once scrolled into view. */
    opacity: 0;
    transform: translateY(26px) rotateX(-10deg);
    transition: opacity .6s var(--ease) var(--delay, 0ms), transform .6s var(--ease) var(--delay, 0ms);
}
.pgroup.is-visible { opacity: 1; transform: none; }
.tier--spotlight .pgroup { align-items: center; }

.pcard { position: relative; transform-style: preserve-3d; }

.pcard__inner {
    position: relative;
    padding: 22px 16px 18px;
    text-align: center;
    background: linear-gradient(170deg, #ffffff, #fafbfe);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.pcard:hover .pcard__inner { box-shadow: var(--shadow-md); border-color: var(--brand-200); }

.pcard__inner::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--brand-700), var(--brand-500) 50%, var(--accent-500));
    opacity: 0;
    transition: opacity .28s var(--ease);
}
.pcard:hover .pcard__inner::before { opacity: 1; }

/* Cursor-following sheen; the tilt script sets --mx / --my */
.pcard__glare {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(63, 76, 184, .13), transparent 45%);
    opacity: 0;
    transition: opacity .28s var(--ease);
}
.pcard:hover .pcard__glare { opacity: 1; }

/* Raise the contents off the card face so the tilt reads as real depth. */
.pcard .fig3d,
.pcard__title,
.pcard__tag { transform: translateZ(30px); }

/* Portrait, when a post carries one (normally just the Convener) */
.pcard__photo {
    width: 96px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    margin: 0 auto 14px;
    border-radius: var(--radius);
    border: 3px solid #fff;
    box-shadow: 0 8px 20px rgba(17, 22, 58, .22);
    transform: translateZ(30px);
}
.pcard--lg .pcard__photo { width: 132px; }

.pcard__title {
    margin: 0; font-size: .93rem; font-weight: 700;
    letter-spacing: -.012em; line-height: 1.4; color: var(--ink-900);
}
/* The people the panel placed in this post, once the names are published. */
.pcard__members {
    list-style: none; margin: 7px 0 0; padding: 0;
    display: grid; gap: 3px;
}
.pcard__members li {
    font-size: .82rem; font-weight: 600; color: var(--brand-700);
    line-height: 1.35; transform: translateZ(26px);
}
/* Each holder keeps their own face beside their name. */
.pcard__member { display: flex; align-items: center; justify-content: center; gap: 7px; text-align: left; }
.pcard__face {
    width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover;
    border: 2px solid #fff; box-shadow: 0 1px 5px rgba(16, 22, 40, .16); background: var(--brand-50);
}
.pcard__face--blank { display: grid; place-items: center; font-size: .82rem; font-weight: 800; color: var(--brand-600); }
.pcard--lg .pcard__face { width: 38px; height: 38px; }
.pcard--lg .pcard__members li { font-size: .95rem; }
.pcard__vacant {
    display: inline-block; margin-top: 7px;
    font-size: .72rem; font-weight: 600; letter-spacing: .03em;
    color: var(--ink-400); transform: translateZ(26px);
}

.pcard__tag {
    display: inline-block; margin-top: 9px;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--brand-700); background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: 999px; padding: 3px 10px;
}

/* Spotlight card — Convener, President, Treasurer, General Secretary */
.pcard--lg { width: min(340px, 100%); }
.pcard--lg .pcard__inner { padding: 30px 26px 24px; }
.pcard--lg .pcard__inner::before { opacity: 1; }
.pcard--lg .pcard__title { font-size: 1.14rem; }
.pcard--lg::after {
    content: "";
    position: absolute; inset: -22px; z-index: -1;
    border-radius: var(--radius-xl);
    background: radial-gradient(circle at 50% 35%, rgba(63, 76, 184, .2), transparent 68%);
}

/* ==========================================================================
   Assistant branch
   ========================================================================== */

.pbranch { display: flex; justify-content: center; height: 20px; }
.pbranch span {
    width: 2px; height: 100%;
    background: linear-gradient(180deg, var(--brand-300), var(--brand-200));
    border-radius: 2px;
}

.alist {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 8px;
}
.tier--spotlight .alist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(340px, 100%);
}

.acard { transform-style: preserve-3d; }
.acard__inner {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 11px;
    background: var(--ink-50);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-xs);
    transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
    transform-style: preserve-3d;
}
.tier--spotlight .acard__inner { flex-direction: column; text-align: center; gap: 6px; padding: 11px 8px; }
.acard:hover .acard__inner {
    background: #fff;
    border-style: solid;
    border-color: var(--brand-200);
    box-shadow: var(--shadow-sm);
}

.acard__title {
    font-size: .74rem; font-weight: 600; line-height: 1.35;
    color: var(--ink-600);
    display: flex; align-items: center; gap: 5px;
    transform: translateZ(16px);
}
.tier--spotlight .acard__title { flex-direction: column; gap: 3px; }
.acard .fig3d { transform: translateZ(16px); }
.acard__num {
    flex: none;
    font-size: .64rem; font-weight: 800;
    color: #fff; background: var(--brand-600);
    width: 15px; height: 15px; border-radius: 50%;
    display: grid; place-items: center;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 760px) {
    /* Drop the tilt scene on touch screens: there is no cursor to drive it. */
    .org { perspective: none; padding-bottom: 44px; }
    .tier { padding: 20px 0; }
    .tier__body--grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
    .tier__head { margin: 18px 0 16px; gap: 10px; }
    .tier__title { font-size: 1.1rem; }
    .pcard__inner { padding: 16px 11px 14px; border-radius: var(--radius); }
    .pcard__title { font-size: .82rem; }
    .fig3d--md { --fig: 56px; }
    .fig3d--lg { --fig: 82px; }
    .pcard .fig3d,
    .pcard__photo,
    .pcard__title,
    .pcard__tag,
    .acard__title,
    .acard .fig3d { transform: none; }
    .tier--spotlight .alist { grid-template-columns: 1fr; }
    .acard__title { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    /* Never leave content hidden behind an animation that will not run. */
    .pgroup { opacity: 1; transform: none; transition: none; }
    .fig3d__spin { animation: none; }
    .fig3d__shadow { animation: none; }
}

@media print {
    .pgroup { opacity: 1 !important; transform: none !important; }
    .fig3d__spin { animation: none; }
    .tier__connector { display: none; }
}

/* The detailed chart is hidden when the admin has chosen the 3D scene alone. It stays
   in the document so printing, screen readers and the no-WebGL fallback still reach it. */
.org--hidden { display: none; }

@media print {
    /* Printing cannot show WebGL, so always fall back to the chart. */
    .org--hidden { display: block; }
    .scene3d { display: none; }
}