/* leaders/style.css — Church leaders flashcards, on top of ../callings/lds.css */

:root {
    --ldr-right: #7fd19b;
    --ldr-wrong: #e07878;
}

[hidden] { display: none !important; }

.ldr-wrap {
    max-width: 72rem;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
}

.ldr-tagline {
    font-size: 0.95rem;
    color: var(--lds-text-dim);
    font-style: italic;
    line-height: 1.65;
    max-width: 40rem;
    margin-bottom: 2rem;
}

/* ── Toolbar ── */
.ldr-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--lds-border);
    border-bottom: 1px solid var(--lds-border);
}
.ldr-sets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
.ldr-set-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.ldr-set-label {
    min-width: 7.5rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lds-text-dim);
}
.ldr-set {
    background: none;
    border: 1px solid var(--lds-border-mid);
    color: var(--lds-text-dim);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ldr-set:hover { border-color: var(--lds-accent-dim); color: var(--lds-accent); }
.ldr-set[aria-pressed="true"] {
    background: var(--lds-surface-2);
    border-color: var(--lds-accent-dim);
    color: var(--lds-accent);
}
.ldr-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.ldr-reset { padding: 0.4rem 0.85rem; }

/* Names switch: a real checkbox, restyled */
.ldr-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    color: var(--lds-text);
    cursor: pointer;
    user-select: none;
}
.ldr-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ldr-switch-track {
    width: 2.3rem;
    height: 1.3rem;
    border-radius: 999px;
    background: var(--lds-surface-2);
    border: 1px solid var(--lds-border-mid);
    position: relative;
    transition: background 0.15s;
}
.ldr-switch-track::after {
    content: '';
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--lds-text-dim);
    transition: transform 0.15s, background 0.15s;
}
.ldr-switch input:checked + .ldr-switch-track { background: var(--lds-accent-dim); }
.ldr-switch input:checked + .ldr-switch-track::after { transform: translateX(1rem); background: var(--lds-accent); }
.ldr-switch input:focus-visible + .ldr-switch-track { outline: 2px solid var(--lds-blue-light); outline-offset: 2px; }

.ldr-asof {
    font-size: 0.75rem;
    color: var(--lds-text-dim);
    margin: 0.75rem 0 0;
}

/* ── Groups ── */
.ldr-group { margin-top: 2.75rem; }
.ldr-group h2 {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lds-accent);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.ldr-group h2::before {
    content: '';
    width: 1.25rem;
    height: 1px;
    background: var(--lds-accent);
    opacity: 0.5;
}
.ldr-count { color: var(--lds-text-dim); letter-spacing: 0.1em; }

.ldr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 1rem;
}

/* ── Card ── */
.ldr-card {
    display: flex;
    flex-direction: column;
    perspective: 1000px;
    cursor: pointer;
    border-radius: 8px;
    outline: none;
}
.ldr-card:focus-visible { outline: 2px solid var(--lds-blue-light); outline-offset: 3px; }

.ldr-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}
.ldr-card.is-flipped .ldr-inner { transform: rotateY(180deg); }

/* The front (photo + caption) sets the card's size; the back lies over it */
.ldr-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 8px;
    border: 1px solid var(--lds-border-mid);
    background: var(--lds-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ldr-card:hover .ldr-face { border-color: var(--lds-accent-dim); }

.ldr-front img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--lds-surface-2);
}
.ldr-front { flex: 1; }
.ldr-caption {
    flex: 1;
    min-height: 3.1rem;
    padding: 0.45rem 0.6rem 0.55rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
}
.ldr-name, .ldr-hint { transition: opacity 0.15s; }
.ldr-name { opacity: 0; }
.ldr-hon {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lds-accent);
}
.ldr-fullname { font-size: 0.88rem; font-weight: 600; color: var(--lds-text); }
.ldr-hint {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--lds-text-dim);
    letter-spacing: 0.3em;
}
.ldr-caption { position: relative; }
/* No-likeness fronts: the role line stands in for "? ? ?" as a hint */
.ldr-hint-role {
    left: 0.6rem; right: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: 0;
    line-height: 1.25;
    color: var(--lds-accent);
}

/* Name shows when: labels are on, this card is revealed, or (mouse) hovered */
.labels-on .ldr-name,
.ldr-card.is-named .ldr-name { opacity: 1; }
.labels-on .ldr-hint,
.ldr-card.is-named .ldr-hint { opacity: 0; }
@media (hover: hover) {
    .ldr-card:hover .ldr-name { opacity: 1; }
    .ldr-card:hover .ldr-hint { opacity: 0; }
}

.ldr-back {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    transform: rotateY(180deg);
    padding: 0.65rem 0.7rem 0.55rem;
    background: var(--lds-surface-2);
    font-size: 0.7rem;
    line-height: 1.35;
    gap: 0.4rem;
}
.ldr-back .ldr-fullname { font-size: 0.86rem; line-height: 1.2; }
.ldr-role { color: var(--lds-accent); font-size: 0.7rem; line-height: 1.3; }
.ldr-note { margin: 0; color: var(--lds-text); font-size: 0.64rem; line-height: 1.3; }
/* History backs carry more text: tighter spacing so most fit without scrolling */
.ldr-back.is-history { padding: 0.55rem 0.6rem 0.45rem; gap: 0.3rem; line-height: 1.28; }
.ldr-back.is-history .ldr-facts { gap: 0.15rem; }

/* History cards for people with no known likeness */
.ldr-nolike { position: relative; }
.ldr-nolike span {
    position: absolute;
    left: 0; right: 0; bottom: 0.7rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lds-text-dim);
}
.ldr-facts { margin: 0; display: grid; gap: 0.25rem; }
.ldr-facts dt {
    display: inline;
    margin-right: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lds-text-dim);
}
.ldr-facts dd { display: inline; margin: 0; color: var(--lds-text); }
.ldr-back-foot {
    margin-top: auto;
    padding-top: 0.4rem;
    border-top: 1px solid var(--lds-border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.64rem;
    color: var(--lds-text-dim);
}
.ldr-back-foot a { color: var(--lds-blue-light); text-decoration: none; white-space: nowrap; }
.ldr-back-foot a:hover { color: var(--lds-accent); }

.ldr-error { margin-top: 2rem; color: var(--ldr-wrong); font-size: 0.9rem; }

/* ── Mode switch ── */
.ldr-modes {
    display: inline-flex;
    border: 1px solid var(--lds-border-mid);
    border-radius: 8px;
    padding: 0.2rem;
    margin-bottom: 1rem;
    background: rgba(22, 45, 80, 0.6);
}
.ldr-mode {
    background: none;
    border: none;
    color: var(--lds-text-dim);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.45rem 1.4rem;
    border-radius: 6px;
    cursor: pointer;
}
.ldr-mode:hover { color: var(--lds-accent); }
.ldr-mode[aria-pressed="true"] { background: var(--lds-surface-2); color: var(--lds-accent); }

/* ── Quiz ── */
.ldr-quiz {
    max-width: 36rem;
    margin: 2.5rem auto 0;
    padding: 1.75rem;
    background: var(--lds-surface);
    border: 1px solid var(--lds-border-mid);
    border-radius: 10px;
}
.ldr-quiz-title { font-size: 1.3rem; font-weight: 700; line-height: 1.25; margin-bottom: 0.35rem; }
.ldr-quiz-sub { color: var(--lds-text-dim); font-size: 0.88rem; margin-bottom: 1.25rem; }
.ldr-fieldset { border: none; margin-bottom: 1.25rem; }
.ldr-fieldset legend {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lds-accent);
    margin-bottom: 0.5rem;
}
.ldr-check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; padding: 0.25rem 0; cursor: pointer; }
.ldr-check input { accent-color: var(--lds-accent); width: 1rem; height: 1rem; }
.ldr-check.is-off { color: var(--lds-text-dim); cursor: default; }
/* Quiz decks: leaders and Church history side by side */
.ldr-decks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.ldr-decks .ldr-check { align-items: flex-start; font-size: 0.85rem; line-height: 1.3; }
.ldr-decks .ldr-check input { flex-shrink: 0; margin-top: 0.1rem; }
.ldr-deck-all { font-weight: 600; }
.ldr-dim { color: var(--lds-text-dim); font-size: 0.8rem; }
.ldr-quiz-note { font-size: 0.8rem; color: var(--lds-text-dim); margin-bottom: 1rem; }

.ldr-primary {
    background: var(--lds-accent);
    border: 1px solid var(--lds-accent);
    color: #10233f;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
}
.ldr-primary:hover { filter: brightness(1.08); }
.ldr-primary:disabled { opacity: 0.4; cursor: default; filter: none; }
.ldr-primary:focus-visible, .ldr-opt:focus-visible, .ldr-link:focus-visible, .ldr-mode:focus-visible, .ldr-set:focus-visible {
    outline: 2px solid var(--lds-blue-light);
    outline-offset: 2px;
}
.ldr-link {
    background: none;
    border: none;
    color: var(--lds-text-dim);
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ldr-link:hover { color: var(--lds-accent); }

.ldr-quiz-progress {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lds-text-dim);
}
.ldr-quiz-bar { height: 3px; background: var(--lds-border-mid); border-radius: 2px; margin: 0.5rem 0 1.25rem; overflow: hidden; }
.ldr-quiz-bar span { display: block; height: 100%; background: var(--lds-accent); transition: width 0.3s; }

.ldr-quiz-card { width: min(15rem, 70%); margin: 0 auto 1rem; }
.ldr-quiz-face {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* An answered question's photo becomes a flashcard: tap to see the back */
.ldr-flippable { cursor: pointer; perspective: 1000px; }
.ldr-flippable .ldr-front { position: relative; }
.ldr-flippable.is-flipped .ldr-inner { transform: rotateY(180deg); }
.ldr-flippable:focus-visible { outline: 2px solid var(--lds-blue-light); outline-offset: 3px; }
.ldr-opt-face.ldr-flippable { overflow: visible; }
.ldr-opt-face .ldr-face { border: none; border-radius: 8px; }
.ldr-opt-face .ldr-back { text-align: left; }

/* Corner badge on an answered card, and a one-time peek at its back */
.ldr-flip-hint {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.65);
    border: 1px solid var(--lds-accent-dim);
    color: var(--lds-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    pointer-events: none;
    animation: ldr-hint-in 0.35s ease 0.3s both;
}
.ldr-opt-face .ldr-flip-hint { top: 0.4rem; bottom: auto; font-size: 0.65rem; padding: 0.15rem 0.4rem; }
.ldr-flippable.is-peek .ldr-inner { animation: ldr-peek 1.1s ease-in-out 0.7s 2; }
@keyframes ldr-hint-in { from { opacity: 0; transform: scale(0.6); } }
@keyframes ldr-peek {
    0%, 100% { transform: rotateY(0); }
    35% { transform: rotateY(-28deg); }
    60% { transform: rotateY(6deg); }
}
.ldr-quiz-prompt { font-size: 1.1rem; font-weight: 700; text-align: center; margin-bottom: 1rem; line-height: 1.35; }

.ldr-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.ldr-opts-faces { max-width: 24rem; margin: 0 auto; }
.ldr-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    background: var(--lds-surface-2);
    border: 1px solid var(--lds-border-mid);
    color: var(--lds-text);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.3;
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.ldr-opt:hover:not(:disabled) { border-color: var(--lds-accent-dim); }
.ldr-opt:disabled { cursor: default; }
.ldr-key {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--lds-text-dim);
    border: 1px solid var(--lds-border-mid);
    border-radius: 4px;
    padding: 0 0.35rem;
}
.ldr-opt.is-right { border-color: var(--ldr-right); box-shadow: 0 0 0 1px var(--ldr-right); }
.ldr-opt.is-wrong { border-color: var(--ldr-wrong); box-shadow: 0 0 0 1px var(--ldr-wrong); }
.ldr-opts.is-answered .ldr-opt:not(.is-right):not(.is-wrong) { opacity: 0.55; }

/* Face choices: portraits in a 2x2 grid; names appear once answered */
.ldr-opt-face { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; gap: 0; }
.ldr-opt-face img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.ldr-opt-face .ldr-key { position: absolute; top: 0.4rem; left: 0.4rem; background: rgba(15, 40, 72, 0.85); }
.ldr-opt-name { display: none; padding: 0.45rem 0.55rem; font-size: 0.8rem; }
.ldr-opts.is-answered .ldr-opt-name { display: block; }

.ldr-quiz-feedback { min-height: 1.5rem; margin: 1rem 0 0.5rem; font-size: 0.9rem; text-align: center; }
.ldr-right { color: var(--ldr-right); }
.ldr-wrong { color: var(--ldr-wrong); }
.ldr-quiz-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-top: 0.75rem; }
.ldr-quiz-actions .ldr-link { margin-right: auto; }

.ldr-quiz-vs { font-size: 1rem; font-weight: 600; color: var(--lds-accent); margin-bottom: 0.75rem; }
.ldr-marks { display: flex; flex-wrap: wrap; gap: 3px; max-width: 15rem; margin-bottom: 1rem; }
.ldr-marks span { width: 1.2rem; height: 1.2rem; border-radius: 3px; }
.ldr-marks .is-right { background: var(--ldr-right); }
.ldr-marks .is-wrong { background: var(--ldr-wrong); }
.ldr-share { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.ldr-share-msg { font-size: 0.82rem; color: var(--ldr-right); }
.ldr-share-text {
    width: 100%;
    margin-bottom: 0.5rem;
    background: var(--lds-bg);
    color: var(--lds-text);
    border: 1px solid var(--lds-border-mid);
    border-radius: 6px;
    padding: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
.ldr-saved { font-size: 0.8rem; color: var(--lds-text-dim); margin: 0.25rem 0 0; }
.ldr-history { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--lds-border); }
.ldr-history-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.6rem; }
.ldr-history ol { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.ldr-history li {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--lds-border);
    font-size: 0.85rem;
}
.ldr-history-score { font-weight: 700; color: var(--lds-accent); white-space: nowrap; min-width: 4.5rem; }
.ldr-history-time { font-weight: 400; color: var(--lds-text-dim); margin-left: 0.25rem; }
.ldr-history-meta { flex: 1; color: var(--lds-text-dim); min-width: 0; }
.ldr-history-clear { font-size: 0.75rem; }
.ldr-missed { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.6rem; margin-bottom: 1.25rem; }
.ldr-missed figure { margin: 0; background: var(--lds-surface-2); border: 1px solid var(--lds-border-mid); border-radius: 6px; overflow: hidden; }
.ldr-missed img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.ldr-missed figcaption { padding: 0.35rem 0.45rem; font-size: 0.72rem; line-height: 1.25; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .ldr-inner { transition: none; }
    .ldr-flip-hint, .ldr-flippable.is-peek .ldr-inner { animation: none; }
}

@media (max-width: 600px) {
    /* Each set row is one line that scrolls sideways, instead of wrapping to many lines */
    .ldr-set-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-right: -1rem;
        padding-right: 1rem;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    }
    .ldr-set-row::-webkit-scrollbar { display: none; }
    .ldr-set-row > * { flex-shrink: 0; white-space: nowrap; }
    .ldr-set-label { min-width: 0; width: 4.75rem; white-space: normal !important; line-height: 1.3; }
    .ldr-wrap { padding: 2rem 1rem 3rem; }
    .ldr-quiz { padding: 1.1rem; margin-top: 1.5rem; }
    .ldr-opts { grid-template-columns: 1fr; }
    .ldr-opts-faces { grid-template-columns: 1fr 1fr; }

    /* Full-screen quiz while a round or its results are showing */
    body.quiz-active { overflow: hidden; }
    body.quiz-active #quiz {
        position: fixed;
        inset: 0;
        z-index: 400; /* under the lds-menu overlay (500) */
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--lds-bg);
        background-image: radial-gradient(ellipse at 60% 0%, rgba(35,80,155,0.55) 0%, transparent 65%);
        padding: max(0.75rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    }
    body.quiz-active .ldr-quiz {
        margin: 0 auto;
        padding: 0.25rem 0 0;
        border: none;
        background: none;
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }
    body.quiz-active .ldr-quiz-actions { margin-top: auto; padding-top: 0.75rem; }
    /* Results scroll as one page; buttons follow the content instead of sitting at the bottom */
    body.quiz-active .ldr-quiz.is-results .ldr-quiz-actions { margin-top: 1rem; }
    /* Size pictures by screen height so a whole question fits without scrolling */
    body.quiz-active .ldr-quiz-card { width: min(75%, 32dvh); }
    @media (max-height: 700px) {
        body.quiz-active .ldr-quiz-card { width: min(75%, 26dvh); }
        body.quiz-active .ldr-opts-faces { max-width: min(100%, 40dvh); }
        body.quiz-active .ldr-opt:not(.ldr-opt-face) { padding: 0.6rem 0.8rem; }
    }
    body.quiz-active .ldr-opts-faces { width: 100%; max-width: min(100%, 44dvh); }
    body.quiz-active .ldr-quiz-prompt { margin-bottom: 0.75rem; }
    body.quiz-active .ldr-quiz-feedback { margin: 0.6rem 0 0.25rem; }
    .ldr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
    .ldr-controls { width: 100%; justify-content: space-between; }
}