/* league studio — educator/owner console */

.studio-wrap {
    /* body is display:flex, so without width:100% this wrapper shrinks to its
       content and starves the cards inside — force it to use its max-width */
    width: 100%;
    max-width: 56rem;
    margin: 0 auto 3rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* page title — match make_league's "Create Your League" heading.
   bottom margin is 2.75rem (not 1.25) because this block wrapper collapses
   the h2/card margins, where make_league's flex parent does not — 2.75rem
   here reproduces make_league's 44px heading-to-form gap. */
.studio-wrap > h2 {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-soft);
    margin: 0.25rem 0 2.75rem;
}

.studio-sub {
    opacity: 0.8;
    margin-bottom: 1.25rem;
}

.studio-card {
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}

.studio-card h3 {
    margin-top: 0;
}

/* label sits to the left; the field sits in a centered column to its right */
.studio-form > label {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    margin: 0.7rem 0;
    text-align: left;
}

.studio-form input[type="text"],
.studio-form input[type="number"],
.studio-form input[type="date"],
.studio-form select,
.studio-form textarea {
    display: block;
    width: 100%;
    max-width: 20rem;
    justify-self: center;
    margin-top: 0;
    padding: 0.45rem 0.6rem;
    box-sizing: border-box;
}

/* side-by-side rows (e.g. answer a / answer b) keep label-on-top */
.studio-row > label {
    display: block;
}
.studio-row input,
.studio-row select {
    max-width: 100%;
    margin-top: 0.25rem;
}

/* collapsible "reveal a form" blocks (add questions / view pool) */
details.studio-reveal {
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    margin: 1rem 0;
}
details.studio-reveal > summary {
    cursor: pointer;
    font-weight: 700;
    padding: 0.4rem 0;
    list-style: none;
}
details.studio-reveal > summary::-webkit-details-marker { display: none; }
details.studio-reveal > summary::before { content: "▸ "; }
details.studio-reveal[open] > summary::before { content: "▾ "; }

/* delete-row checkboxes */
.studio-table td.q-check,
.studio-table th.q-check { width: 2rem; text-align: center; }
.studio-bulk-bar { display: flex; gap: 0.75rem; align-items: center; margin: 0.75rem 0; flex-wrap: wrap; }

.studio-btn-row { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin: 1.5rem 0; }

.studio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin: 0.5rem 0;
}

.studio-row label {
    flex: 1 1 12rem;
}

.studio-hint {
    font-size: 0.9rem;
    opacity: 0.75;
    margin: 0.5rem 0;
}

.studio-flash {
    font-weight: 600;
}

.studio-code {
    font-family: monospace;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    padding: 0.5rem 1.1rem;
    color: var(--text-inverse);
    background: rgba(42, 127, 255, 0.12);
    border: 1px solid rgba(42, 127, 255, 0.55);
    border-radius: 0.6rem;
    display: inline-block;
}

.studio-invite {
    width: 100%;
    max-width: 34rem;
    padding: 0.6rem 0.75rem;
    box-sizing: border-box;
    background: var(--bg-0, #0d1117);
    color: var(--text, var(--text));
    border: 1px solid var(--border, var(--border));
    border-radius: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.45;
    resize: vertical;
}

.studio-league-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.studio-league-list li {
    padding: 0.35rem 0;
}

.studio-league-list li.selected a {
    font-weight: 700;
}

.studio-meta {
    opacity: 0.65;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

/* long question lists (My questions / Our pool) scroll past ~10 rows
   instead of stretching the card down the page */
.q-scroll {
    max-height: 22rem;        /* ~header + 10 rows, then a scrollbar appears */
    overflow-y: auto;
    margin-top: 0.75rem;
    border: 1px solid rgba(128, 128, 128, 0.18);
    border-radius: 0.4rem;
}

.studio-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;            /* spacing now lives on .q-scroll */
    font-size: 0.92rem;
}

/* keep the header visible while the rows scroll under it */
.q-scroll .studio-table th {
    position: sticky;
    top: 0;
    background: var(--bg-1, var(--bg-3));
    z-index: 1;
}

.studio-table th,
.studio-table td {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    vertical-align: top;
}

.studio-table tr.retired td {
    opacity: 0.45;
    text-decoration: line-through;
}

.btn-small {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
}

/* ---- category picker (create form) ---- */
.make-league-scope .cat-master {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}
.make-league-scope .cat-lead { font-size: 0.9rem; color: var(--text, var(--text)); text-align: center; margin: 0 0 0.7rem; }
.make-league-scope .btnpair { display: flex; gap: 0.4rem; }

.make-league-scope .minibtn {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text, var(--text));
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--border, var(--border));
    border-radius: 0.4rem;
    padding: 0.32rem 0.7rem;
    cursor: pointer;
    width: auto;
}
.make-league-scope .minibtn:hover { background: rgba(255,255,255,0.14); border-color: var(--accent-hover, var(--accent-hover)); }
.make-league-scope .minibtn.sm { font-size: 0.72rem; padding: 0.2rem 0.55rem; }

.make-league-scope fieldset.cat-group {
    margin: 0.7rem 0 0;
    padding: 0.4rem 0.9rem 0.7rem;
    border: 1px solid var(--border, var(--border));
    border-radius: 0.45rem;
    background: transparent;
}
.make-league-scope .cat-grouptools { display: flex; justify-content: flex-end; gap: 0.4rem; margin-bottom: 0.3rem; }
.make-league-scope .cat-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.make-league-scope .cat-grid { display: grid; grid-template-columns: 1fr; gap: 0.35rem; }
.make-league-scope .cat-master-btns { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
@media (max-width: 32rem) { .make-league-scope .cat-groups { grid-template-columns: 1fr; } }

.make-league-scope label.cat-chk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text, var(--text));
    cursor: pointer;
}
.make-league-scope label.cat-chk input { width: auto; margin: 0; accent-color: var(--accent, var(--accent)); }

.make-league-scope .cat-other { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px dashed var(--border, var(--border)); }


/* ---- studio_league_manage: airier spacing to match the other forms ---- */
.studio-manage .container { padding: 1.5rem 1.4rem 1.6rem; }
.studio-manage > h2 { margin: 1.5rem 0 2.75rem; }
.studio-manage .make-league-scope fieldset { margin: 1.5rem 0 0; padding: 1rem 1.25rem 1.25rem; }
.studio-manage .make-league-scope fieldset:first-of-type { margin-top: 0.25rem; }
.studio-manage .make-league-scope label { margin: 0.9rem 0 0.3rem; }
.studio-manage details.studio-reveal { margin: 1rem 0 0; }
.studio-manage .button-group { margin-top: 2rem; justify-content: center; }

.studio-manage .settings-save { margin-top: 1.1rem; }
.studio-manage .code-actions { margin-top: 0.9rem; justify-content: center; }

/* ---- multiple-choice question editor (studio_league_manage) ------------- */
.studio-manage .opt-rows {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.4rem 0 0.6rem;
}

.studio-manage .opt-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.studio-manage .opt-row .opt-text {
    flex: 1 1 auto;
    min-width: 0;
}

.studio-manage .opt-correct {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    font-size: 0.9rem;
    opacity: 0.9;
}

.studio-manage .opt-correct input {
    width: auto;
    margin: 0;
}

.studio-manage .opt-del {
    flex: 0 0 auto;
    padding: 0.25rem 0.6rem;
    line-height: 1;
    font-size: 1.1rem;
}

.studio-manage .opt-controls {
    align-items: center;
    gap: 1rem;
    margin-top: 0.2rem;
}

.studio-manage #gradeWrap {
    margin: 0;
}

.studio-manage .q-type {
    white-space: nowrap;
    opacity: 0.85;
    font-size: 0.85rem;
}