/* Global overrides can be put here */

/* Unified bonus editor */
.unified-editor-textarea {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    line-height: 1.5;
    min-height: 250px;
    padding: 0.75em;
}

#toggle-unified-editor {
    margin-bottom: 0.75em;
}

/* jQuery UI dialog above Foundation dropdowns */
.ui-widget-overlay {
    z-index: 10000 !important;
}
.ui-dialog {
    z-index: 10001 !important;
}

/* Paste tossup dialog */
#paste-tossup-dialog textarea {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    line-height: 1.5;
    resize: vertical;
}

/* Threaded comments */
.comment-item {
    margin-bottom: 1em;
}

.comment-actions {
    margin-top: 0.25em;
    margin-bottom: 0.5em;
    font-size: 0.85em;
}

.comment-actions a {
    margin-right: 0.75em;
}

.comment-replies {
    margin-left: 30px;
    border-left: 2px solid #ddd;
    padding-left: 12px;
}

.reply-form {
    margin-top: 0.5em;
    margin-bottom: 0.75em;
}

.reply-form textarea {
    width: 100%;
    margin-bottom: 0.5em;
}

/* Comment input boxes (packet/question/reply threads) should be compact, not
   the very tall default; they stay resizable for longer comments. */
.app-content .new-comment-text { min-height: 3.4em; height: 4.5em; resize: vertical; }
.app-content .reply-text { min-height: 3em; height: 3.5em; resize: vertical; }

.reply-form .button {
    margin-right: 0.5em;
}

/* Anchored (Google Docs-style) comments */
.anchored-highlight {
    background-color: #fff3b0;
    border-bottom: 1px dotted #b8960c;
    cursor: pointer;
    padding: 0;
}

.anchored-highlight.active,
.anchored-highlight:hover {
    background-color: #ffd966;
}

.anchored-highlight.anchor-flash {
    background-color: #ffc107;
}

.comment-quote {
    border-left: 3px solid #e6b800;
    background-color: #fdf7e2;
    padding: 0.15em 0.5em;
    margin-bottom: 0.25em;
    font-style: italic;
    font-size: 0.9em;
    color: #666;
    cursor: pointer;
}

.comment-quote.orphaned {
    border-left-color: #bbb;
    background-color: #f2f2f2;
    cursor: default;
    text-decoration: line-through;
}

.comment-item.anchor-flash {
    background-color: #fdf7e2;
    transition: background-color 0.3s;
}

#anchor-comment-btn {
    position: absolute;
    z-index: 1000;
    margin: 0;
}

#anchor-comment-popup {
    position: absolute;
    z-index: 1000;
    width: 340px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    padding: 0.5em;
}

#anchor-comment-popup .anchor-popup-quote {
    border-left: 3px solid #e6b800;
    background-color: #fdf7e2;
    padding: 0.15em 0.5em;
    margin-bottom: 0.5em;
    font-style: italic;
    font-size: 0.85em;
    color: #666;
}

#anchor-comment-popup textarea {
    width: 100%;
    margin-bottom: 0.5em;
}

#anchor-comment-popup .button {
    margin: 0 0.5em 0 0;
}

/* Rich text question entry */
.rich-editor-wrapper {
    margin-bottom: 1em;
    /* The special-characters panel is positioned against this. */
    position: relative;
}

.rich-editor-toolbar {
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    background-color: #f4f4f4;
    padding: 0.2em 0.5em;
}

/* Every button is the same height and centres its label, whatever the label
   is: a glyph, x-with-a-subscript, or a word. Sizes are in rem so a smaller
   word label doesn't make a shorter button. */
.rich-editor-toolbar a.rich-editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    box-sizing: border-box;
    height: 1.9rem;
    min-width: 2.1rem;
    padding: 0 0.5rem;
    margin: 0.1rem 0.3rem 0.1rem 0;
    border: 1px solid #bbb;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    color: #333;
    font-size: 0.95rem;
    line-height: 1;
    white-space: nowrap;
}
/* Sub/superscript would otherwise push their button's baseline around. */
.rich-editor-toolbar a.rich-editor-btn sub,
.rich-editor-toolbar a.rich-editor-btn sup {
    font-size: 0.7em;
    line-height: 0;
}
/* The named tools (PG, Note, DB, Raw, Bonus skeleton) share one label size and
   weight; each keeps its own tint or face to say what it makes. */
.rich-editor-toolbar a.rich-editor-btn.rich-editor-pg,
.rich-editor-toolbar a.rich-editor-btn.rich-editor-note,
.rich-editor-toolbar a.rich-editor-btn.rich-editor-qb,
.rich-editor-toolbar a.rich-editor-btn.rich-editor-plain,
.rich-editor-toolbar a.rich-editor-btn.rich-editor-skel {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rich-editor-toolbar a.rich-editor-btn:hover {
    border-color: #888;
    background-color: #eef4fa;
}

.rich-editor-toolbar a.rich-editor-btn:active {
    background-color: #dde8f2;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* The pronunciation-guide buttons, tinted to match the amber .pg-target spans. */
.rich-editor-toolbar a.rich-editor-btn.rich-editor-pg {
    color: #a1490b;
}
/* The note button, tinted to match the grey .q-note spans it produces. */
.rich-editor-toolbar a.rich-editor-btn.rich-editor-note {
    color: #555;
    font-style: italic;
}
html[data-theme="dark"] .rich-editor-toolbar a.rich-editor-btn.rich-editor-note {
    color: var(--qx-muted, #9aa0ad);
}
/* In the editor a note gets a faint tint so the run it covers is obvious even
   before you notice the italics. */
.rich-editor .q-note { background: rgba(120, 120, 120, 0.10); border-radius: 2px; }

/* Reflects the formatting at the caret/selection (pressed = active) */
.rich-editor-toolbar a.rich-editor-btn.active {
    background-color: #008cba;
    border-color: #0079a8;
    color: #fff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Editor "cross out part of a comment" affordance: struck comment text plus the
   floating button shown when text inside a comment is selected. */
.comment-strikeable del { color: #8a8f9c; text-decoration: line-through; cursor: pointer; }
.comment-strike-btn {
    position: absolute;
    z-index: 1000;
    background: #2b2f3a;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 3px 9px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(20,20,40,.3);
}
.comment-strike-btn:hover { background: #3d4250; }

/* Raw-markup toggle button, and the greyed-out formatting buttons while the
   plain textarea is showing (only the toggle itself stays usable). */
.rich-editor-toolbar a.rich-editor-btn.rich-editor-plain {
    font-family: monospace;
    color: #565b66;
}
.rich-editor-plainmode .rich-editor-toolbar a.rich-editor-btn:not(.rich-editor-plain) {
    opacity: 0.4;
    pointer-events: none;
}
.rich-editor-plainmode .rich-editor-plain {
    background-color: #eef2f7;
    border-color: #cbd3dd;
}

/* The cells of a question table (_question_table_cells.html). Shared by the
   category pages and the search results, which show the same columns in the
   same order -- whatever the set asked for. */
/* Long tag names ("Hist / Middle East and African History") wrap inside the
   pill rather than stretching the column. */
.qtable-tags { min-width: 9em; max-width: 13em; }
.qtable-tag { display: inline-block; max-width: 100%; background: #eef2f7; color: #2b2f3a;
    border-radius: 9px; padding: 0 7px; margin: 0 3px 2px 0; font-size: 0.75rem;
    white-space: normal; overflow-wrap: break-word; line-height: 1.4; text-decoration: none; }
a.qtable-tag:hover, a.qtable-tag:focus { background: #dfe3f7; color: #4b3bb0; text-decoration: underline; }
html[data-theme="dark"] a.qtable-tag:hover, html[data-theme="dark"] a.qtable-tag:focus { color: #c3b3f5; }
.qtable-none { color: #b0b4c0; }
.qtable-length { text-align: right; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .qtable-tag { background: var(--qx-elevate); color: var(--qx-text); }

/* Search results print the whole question, so its column needs room: at a
   dozen columns the browser had squeezed it to 150px and every row stood
   1,400px tall. The table scrolls sideways instead. */
.search-results-wrap { overflow-x: auto; }
#search-results .qtable-preview { min-width: 26rem; }
/* The question column runs to many lines, so everything beside it belongs at
   its first line rather than floating halfway down the row. */
#search-results td { vertical-align: top; }
#search-results th { vertical-align: bottom; }
/* A right-aligned count under a left-aligned heading read as a stray column. */
#search-results th.qtable-col-length { text-align: right; }
/* Dates and counts are single values; wrapping them made two ragged lines. */
#search-results .qtable-length, #search-results .qtable-date { white-space: nowrap; }
/* Search sat on its own line, floated, and the results panel rode up under it. */
.search-actions { display: flex; justify-content: flex-end; margin: 0 0 1rem; }
.search-actions .button { margin: 0; }

/* Unsaved changes on an edit page: a bar floating at the bottom right of the
   window, so Save is in reach from wherever you are in a long question.
   Fixed, not in the page's flow: it used to be a sticky bar at the top of the
   content, and appearing on the first keystroke pushed the whole page down
   under the caret. Floating over the corner, it moves nothing. */
.q-savebar {
    position: fixed;
    right: 24px;
    bottom: 20px;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid #f0c98a;
    border-radius: 8px;
    background: #fdf6e7;
    box-shadow: 0 6px 20px rgba(20, 20, 40, 0.16);
}
/* An author `display` beats the UA stylesheet's [hidden] rule, so the bar has
   to hide itself explicitly or it is on the page from the moment it loads. */
.q-savebar[hidden] { display: none; }
.q-savebar-label { font-weight: 600; font-size: 0.85rem; color: #8a5a12; }
.q-savebar .button { margin: 0; }
html[data-theme="dark"] .q-savebar {
    background: #3a2f1c;
    border-color: #6b5426;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .q-savebar-label { color: #f0c98a; }

/* The Type Questions box's "start a bonus for me" button (sized with the other
   named tools above). */
.rich-editor-toolbar a.rich-editor-btn.rich-editor-skel {
    color: #2b6a3f;
}
html[data-theme="dark"] .rich-editor-toolbar a.rich-editor-btn.rich-editor-skel {
    color: #7fc79a;
}

/* The special-characters panel: hangs under the toolbar (JS sets `top` to the
   toolbar's height) so opening it never pushes the question field down. */
.rich-editor-toolbar a.rich-editor-btn.rich-editor-sym {
    font-size: 1rem;
}
.rich-editor-symbols {
    display: none;
    position: absolute;
    left: 0;
    z-index: 900;
    width: 30em;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.5em 0.6em 0.7em;
    border: 1px solid #bbb;
    border-radius: 0 0 4px 4px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(20, 20, 40, 0.18);
}
.rich-editor-symbols .sym-head {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.35em;
}
.rich-editor-symbols .sym-heading {
    flex: 1 1 auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}
.rich-editor-symbols .sym-caps,
.rich-editor-symbols .sym-close {
    flex: 0 0 auto;
    padding: 0.05em 0.45em;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #f7f7f7;
    color: #444;
    font-size: 0.75rem;
    line-height: 1.5;
}
.rich-editor-symbols .sym-caps:hover,
.rich-editor-symbols .sym-close:hover { background: #eef4fa; border-color: #888; }
.rich-editor-symbols .sym-caps.active {
    background: #008cba;
    border-color: #0079a8;
    color: #fff;
}
.rich-editor-symbols .sym-label {
    margin: 0.4em 0 0.2em;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8f9c;
}
.rich-editor-symbols .sym-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.rich-editor-symbols a.sym-btn {
    display: block;
    min-width: 1.9em;
    padding: 0.1em 0.2em;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #222;
    font-size: 1.05em;
    line-height: 1.5;
    text-align: center;
}
.rich-editor-symbols a.sym-btn:hover {
    border-color: #888;
    background: #eef4fa;
}

/* Keep a long question answer in the top breadcrumb from overflowing the bar. */
.top-bar .breadcrumbs { overflow: hidden; max-width: 100%; }
.top-bar .breadcrumbs > li {
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.char-count-note { margin: 0.25rem 0 0.75rem; color: #555; font-size: 0.9em; }
.char-count-note .char-count-excluded { color: #888; }
.packet-assignment { padding: 4px 0; font-size: 0.95em; }
.packet-assignment .prefix { display: inline; background: none; border: none; padding: 0 6px 0 0; font-weight: bold; }
.packet-assignment .packet-grid-link { margin-left: 8px; font-size: 0.85em; }

.rich-editor {
    border: 1px solid #ccc;
    border-radius: 0 0 3px 3px;
    background-color: #fff;
    padding: 0.5em;
    min-height: 4.5em;
    /* A serif with a TRUE italic (not the sans stack's oblique): in the site
       font an italic "\" leans upright and reads as "|", and the slant hides
       where an italic run ends. Georgia's italic letterforms are unmistakable,
       and it's closer to the Times New Roman the exported packets use. */
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1em;
    /* Its own weight, not its container's: on the add-bonus page the part
       editors sit inside <label>s, which are semibold, and every part came
       out bold. */
    font-weight: normal;
    line-height: 1.5;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    /* The editor sits inside a <label> (cursor: pointer in Foundation); force
       a text caret so it reads as an editable text box, not a clickable thing. */
    cursor: text;
}
/* Make italic runs easy to see the edges of while editing: give them their own
   ink color (no background box), and a hair of clearance after the run so the
   last slanted glyph's overhang doesn't crowd the next character. */
.rich-editor i, .rich-editor em {
    color: #0b6aa8;
    padding-right: 0.08em;
}
html[data-theme="dark"] .rich-editor i, html[data-theme="dark"] .rich-editor em {
    color: #7cc0f4;
}

/* Stem / leadin / part-text fields start a bit taller than answer lines; they
   still grow with content as you type, so the empty box stays compact. */
.rich-editor.rich-editor-tall {
    min-height: 5em;
}

.rich-editor.rich-editor-short {
    min-height: 2.25em;
}

/* Compact the individual-fields bonus editor — it has 7 text fields plus 3
   difficulty selects and ate too much vertical space. Scoped to the container
   so the unified editor, tossup editor, and Type Questions box are unaffected.
   Editors still grow with content; this mainly tightens labels/margins. */
#individual-fields-container label { display: block; margin: 0.45rem 0 0.1rem; font-size: 0.8rem; font-weight: 600; color: #565b66; }
#individual-fields-container > label:first-child { margin-top: 0; }
#individual-fields-container .rich-editor-wrapper { margin-bottom: 0; }
#individual-fields-container .rich-editor-toolbar { padding: 0.1em 0.4em; }
#individual-fields-container .rich-editor-toolbar a.rich-editor-btn { height: 1.6rem; min-width: 1.8rem; padding: 0 0.4rem; }
#individual-fields-container .rich-editor-hint { font-size: 0.7em; padding-top: 0.25em; }
#individual-fields-container .rich-editor { padding: 0.35em 0.5em; }
#individual-fields-container .rich-editor.rich-editor-tall { min-height: 2.6em; }
#individual-fields-container .rich-editor.rich-editor-short { min-height: 1.8em; }
#individual-fields-container select { margin: 0 0 0.2rem; height: 34px; }
/* Per-part row: a short "Dif" dropdown column sits to the left of the part
   text, so difficulty + part text read as columns in one row. */
#individual-fields-container .bonus-part { display: flex; gap: 10px; align-items: flex-start; margin-top: 0.5rem; }
#individual-fields-container .bonus-part-dif { flex: 0 0 52px; margin-top: 0; }
#individual-fields-container .bonus-part-dif select { width: 100%; padding: 0 0.2rem; text-align: center; }
#individual-fields-container .bonus-part-main { flex: 1 1 auto; min-width: 0; }
#individual-fields-container .bonus-part-main > label:first-child { margin-top: 0; }

/* Edit-tossup / edit-bonus two-column layout: editing on the left, comments
   in a sticky panel on the right (mirrors the document view). */
/* Grid (not flex) so the main column reliably fills the remaining width and its
   children stretch to it — flex-grow left the preview panel short of full width. */
.edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
/* width:100% forces the main column (and its panel/form) to fill the grid track
   even if a child would otherwise shrink-wrap to its content. */
.edit-main { min-width: 0; width: 100%; overflow-wrap: anywhere; }
.edit-main > .panel.question, .edit-main > .qpane > .panel.question, .edit-main > form { width: 100%; box-sizing: border-box; }
.edit-comments {
    max-width: 330px;
    position: sticky; top: 8px;
    max-height: calc(100vh - 24px); overflow-y: auto;
    padding-left: 14px;
    /* Room for the scrollbar: an overlay scrollbar (Firefox, macOS) draws
       over the content, and covered the hide button and the cards' right
       edge. */
    padding-right: 12px;
    scrollbar-gutter: stable;
}
/* A question nobody has commented on gives its column back to the question --
   330px is a lot of width to hold open for an empty panel -- and so does one
   whose column you have put away. The Comments button in the question panel
   brings it back either way. */
.edit-layout-solo { grid-template-columns: minmax(0, 1fr); }
.edit-layout-solo .edit-comments { display: none; }
/* The button lives in the question's own action row and only shows itself when
   there is a column to bring back. */
.q-copy-tools .ec-open { display: none; }
body.app-authed .qhead-actions.q-copy-tools .ec-open { display: inline-flex; }
/* inline-flex, not inline-block: the button is a .q-copy-btn, and a fixed
   26px box that is not a flex container leaves its label sitting at the top
   of it, a few pixels above the Copy/Discord pills it shares the row with. */
.edit-layout-solo ~ * .ec-open,
.edit-layout-solo .ec-open { display: inline-flex; }
/* Fold the column away from its own header. */
.edit-comments .ec-hide {
    margin: 0 0 0 6px; padding: 0 4px; border: none; background: none; cursor: pointer;
    color: var(--qx-muted, #8a8f9c); font-size: 0.8rem; line-height: 1;
}
.edit-comments .ec-hide:hover { color: var(--qx-ink, #2b2f3a); }
.ec-head .ec-delete-all + .ec-hide { margin-left: 6px; }
.ec-head .ec-title + .ec-count + .ec-hide,
.ec-head .ec-title + .ec-hide { margin-left: auto; }

/* ---- The comment column ------------------------------------------------
   Cards rather than a run of text: a name, the comment, and quiet actions that
   only come up under the pointer, so the column reads as a conversation
   instead of a wall of links. Matches the doc view's gutter cards. */
.edit-comments .ec-head {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--qx-border, #e9e9ef);
}
.ec-title { font-weight: 700; font-size: 0.95rem; color: var(--qx-ink, #2b2f3a); }
.ec-count {
    font-size: 0.7rem; font-weight: 700; line-height: 1.6;
    min-width: 1.5em; text-align: center; padding: 0 5px; border-radius: 9px;
    background: var(--qx-elevate, #eef2f7); color: var(--qx-muted, #6b7280);
}
/* Sits beside the heading, not in the reading path: the page's link colour
   would make deleting every comment the loudest thing in the column. */
.edit-comments .ec-delete-all { margin-left: auto; font-size: 0.72rem;
    color: var(--qx-muted, #8a8f9c); }
.edit-comments .ec-delete-all:hover { color: #c0392b; }

.edit-comments .ec-card {
    margin: 0 0 8px;
    padding: 8px 10px;
    border: 1px solid var(--qx-border, #e9e9ef);
    border-radius: 8px;
    background: var(--qx-card, #fff);
    font-size: 0.85rem;
}
.edit-comments .ec-card:hover { border-color: #cfd4e0; }
.ec-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.ec-who { font-weight: 600; color: var(--qx-ink, #2b2f3a); min-width: 0; overflow-wrap: anywhere; }
.ec-when { margin-left: auto; flex: 0 0 auto; font-size: 0.7rem; color: var(--qx-muted, #8a8f9c); }
.ec-body { color: #3f434d; overflow-wrap: anywhere; }
.ec-body p { margin: 0 0 4px; }
.ec-body p:last-child { margin-bottom: 0; }
.ec-chip {
    flex: 0 0 auto; font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: 0 5px; border-radius: 3px; line-height: 1.7;
}
.ec-chip-discord { background: #e7e4fb; color: #4b3fa0; }
.ec-chip-resolved { background: #dff3e6; color: #1c7c3e; }
.ec-discord-link { display: inline-block; font-size: 0.72rem; margin-top: 2px; }

/* Quiet until you want them, so the column is comments first and controls
   second. Kept visible on touch, where there is no hover to reveal them. */
.edit-comments .ec-actions {
    margin: 4px 0 0; font-size: 0.72rem;
    visibility: hidden;
}
.edit-comments .ec-card:hover > .ec-actions,
.edit-comments .ec-reply:hover > .ec-actions,
.edit-comments .ec-actions:focus-within { visibility: visible; }
@media (hover: none) {
    .edit-comments .ec-actions { visibility: visible; }
}
.edit-comments .ec-actions a { margin-right: 8px; color: var(--qx-muted, #8a8f9c); }
.edit-comments .ec-actions a:hover { color: #008CBA; text-decoration: underline; }
.edit-comments .ec-actions a.ec-danger:hover { color: #c0392b; }

/* A resolved comment stays readable but settled: green rail, muted text. */
.edit-comments .comment-resolved {
    opacity: 1;
    border-left: 3px solid #48a86b;
    background: #f8fbf9;
}
.edit-comments .comment-resolved .ec-body,
.edit-comments .comment-resolved .ec-who { color: #7f8c85; }

.ec-replies { margin: 6px 0 0 6px; padding-left: 10px; border-left: 2px solid #e2ddf7; }
.edit-comments .ec-reply { margin-bottom: 6px; }
.edit-comments .ec-reply:last-child { margin-bottom: 0; }
.ec-quote {
    border-left: 3px solid #f4b400; background: #fef7e0; color: #7a6a2a;
    padding: 2px 7px; margin: 0 0 5px; border-radius: 0 3px 3px 0;
    font-style: italic; font-size: 0.75rem; cursor: pointer;
}

.ec-empty { color: var(--qx-muted, #8a8f9c); font-size: 0.82rem; font-style: italic;
    margin: 0 0 10px; }

/* Composer and reply boxes: the buttons sit under the field, right-aligned. */
.edit-comments .ec-composer { margin-top: 10px; }
.edit-comments .ec-composer textarea,
.edit-comments .reply-form textarea {
    margin: 0 0 6px; font-weight: normal; font-size: 0.85rem;
}
.ec-form-actions { display: flex; align-items: center; gap: 8px; }
.ec-form-actions .button { margin: 0; }
.ec-form-actions .button.primary { margin-left: auto; }
.ec-hint { font-size: 0.68rem; color: var(--qx-muted, #b0b4c0); }
.edit-comments .reply-form { margin: 6px 0 0; }
.edit-comments .comment-edit-form textarea { font-size: 0.85rem; margin-bottom: 6px; }

/* The fixed sidebar eats ~250px, so stack the comments below the editor well
   before the viewport itself gets narrow — otherwise the columns overlap. */
@media (max-width: 1200px) {
    .edit-layout { display: block; }
    .edit-comments { max-width: none; position: static; max-height: none;
        padding-left: 0; margin-top: 18px; }
}

/* Edit-page meta: Category/Author dropdowns as clean labeled fields, plus a
   compact packet + status-flags bar (replaces the old prefix-box layout). */
/* Category, Author and "Credit to" on one line: at two columns the third
   dropped to a row of its own and left a hole beside it. They are short fields
   -- a category path is the longest of them -- so three fit comfortably. */
.app-content .qmeta-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 18px; margin: 6px 0 16px; max-width: 1080px; }
.app-content .qmeta-field { display: flex; flex-direction: column; gap: 5px; }
.app-content .qmeta-field > label { font-weight: 600; font-size: 0.82rem; color: #565b66; margin: 0; }
.app-content .qmeta-field select,
.app-content .qmeta-field input { margin: 0; height: 40px; width: 100%; }
.app-content .qmeta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
    margin-bottom: 16px; padding: 12px 16px; background: #f6f6fb;
    border: 1px solid #ececf0; border-radius: 10px; }
.qmeta-packet { font-size: 0.95rem; }
.qmeta-packet .qmeta-label { font-weight: 700; color: #565b66; margin-right: 6px; }
.qmeta-gridlink { margin-left: 10px; font-size: 0.85rem; }
/* Previous/next question in this packet, sitting with the packet name it walks.
   Each link shows where it goes, so you can step through a packet without
   opening a tab per question. */
.packet-nav { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; vertical-align: baseline; }
.packet-nav-link { display: inline-flex; align-items: center; gap: 5px; max-width: 22em;
    padding: 2px 8px; border: 1px solid var(--qx-border, #e2e2ea); border-radius: 3px;
    background: #f7f7fa; font-size: 0.8rem; line-height: 1.5; }
.packet-nav-link:hover { background: #efe6fb; border-color: #d6c6f2; }
.packet-nav-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.packet-nav-end { color: var(--qx-muted, #8a8f9c); background: none; border-color: transparent; cursor: default; }
.packet-nav-end:hover { background: none; }
/* On the edit pages the walk sits under the breadcrumb as its own row, where
   it's reachable without scrolling past the question to the meta row. */
.packet-nav.packet-nav-top { display: flex; margin: 0 0 14px; }
html[data-theme="dark"] .packet-nav-link { background: var(--qx-elevate); border-color: var(--qx-border); }
html[data-theme="dark"] .packet-nav-link:hover { background: var(--qx-hover); }
html[data-theme="dark"] .packet-nav-end { background: none; border-color: transparent; }
/* Action buttons + Save share one row; Save is pushed to the right. */
.qmeta-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; }
/* Tighter padding so the row fits on one line at smaller widths. */
.qmeta-actions .button { margin: 0; padding: 0.5rem 0.7rem; font-size: 0.78rem; }
.qmeta-actions .qmeta-save { margin-left: auto; }
/* Save row (Save + Save as Suggested Changes) when Save isn't in the action row. */
.save-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin: 8px 0 16px; clear: both; }
.save-actions .button { margin: 0; }

/* Home action buttons: a responsive grid that wraps to fit the screen, instead
   of Foundation's non-wrapping button-group row (which overflowed on mobile). */
ul.button-group.home-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    /* Every row is as tall as the tallest button on the whole grid, so a
       two-line label in row 1 doesn't leave row 2 visibly shorter. */
    grid-auto-rows: 1fr; gap: 8px; margin: 0 0 1.2rem; padding: 0; }
/* Foundation's .button-group clearfix ::before/::after become anonymous grid
   items — the ::before occupied the whole first cell, shoving the buttons
   right and leaving a phantom gap. */
ul.button-group.home-actions::before, ul.button-group.home-actions::after { content: none; }
ul.button-group.home-actions > li { display: block; margin: 0; float: none; }
/* Fill the cell (equal heights across the row) and center the label, so a
   long label wrapping to two lines doesn't make one button taller.
   The gap is what separates the icon from its label: a flex container makes
   the label an anonymous flex item and strips the leading whitespace of the
   " Label" text node, so the space typed in the markup never survives. */
ul.button-group.home-actions > li > .button { display: flex; align-items: center; justify-content: center;
    gap: 0.5em; text-align: center; width: 100%; height: 100%; margin: 0; border-left: 0; border-radius: 8px;
    /* Tight enough that a two-line label still reads as a button rather than a
       tile -- every row is sized to the tallest label, so the padding here is
       paid by all nine of them. */
    padding: 0.5rem 0.75rem; line-height: 1.2; }
/* The icon keeps its own width whatever the label does — a wrapping label
   must not squeeze it out of shape. */
ul.button-group.home-actions > li > .button > .fa { flex: 0 0 auto; }
/* The parenthesized guide itself, ("KAM-uh-flahzh"): a gray aside, never bold.
   The renderer emits it as <strong class="pronunciation-guide"> even inside a
   bolded power region, so font-weight has to be reset here — otherwise an
   in-power guide would read as clue text. */
.pronunciation-guide { color: #888; font-weight: normal; }
html[data-theme="dark"] .pronunciation-guide { color: var(--qx-muted, #9aa0ad); }
/* A note to the moderator or the players, marked \Ntext\N: read aloud, but not
   part of the clue. Like a guide it keeps its own look inside a bolded power
   region, so it can't be mistaken for clue text that scores. */
/* Italic comes from here rather than an <em> tag on purpose: the editor turns
   its HTML back into QEMS markup, and a real <em> would add a pair of tildes
   inside the note on every save. */
.q-note { color: #555; font-weight: normal; font-style: italic; }
html[data-theme="dark"] .q-note { color: var(--qx-muted, #9aa0ad); }
/* Pronunciation-guide target word(s), marked \Pword\P in QEMS markup: amber, not
   blue, so it can't be mistaken for an italic run (which is blue in the editor).
   In the editor a dotted underline shows exactly where the marked span ends. */
.pg-target { color: #a1490b; }
html[data-theme="dark"] .pg-target { color: #f0a868; }
.rich-editor .pg-target {
    border-bottom: 1px dotted currentColor;
    background: rgba(161, 73, 11, 0.07);
}
html[data-theme="dark"] .rich-editor .pg-target { background: rgba(240, 168, 104, 0.12); }
/* The guide belonging to a marked target, greyed in the editor the way the
   saved question renders it. Amber word + grey guide is what "anchored"
   looks like, so a guide still in the clue colour is one you haven't marked. */
.pg-guide { color: #888; }
html[data-theme="dark"] .pg-guide { color: var(--qx-muted, #9aa0ad); }
/* "PGs above" mode (doc view): the guide moves into ruby text over its words
   and the inline bold guide is hidden. The ruby annotation exists only after
   the toggle first runs; rt stays hidden unless the mode class is on. */
ruby.pg-ruby rt { display: none; font-size: 0.62em; font-weight: normal; color: #a1490b; }
html[data-theme="dark"] ruby.pg-ruby rt { color: #f0a868; }
.doc-pg-above ruby.pg-ruby rt { display: revert; }
.doc-pg-above strong.pg-inline { display: none; }

/* Copy/export tools share the "Last modified" row, pushed to the right. In
   normal flow (not absolutely positioned) so they always align cleanly with
   each other and the row. Small text pills — Font Awesome glyphs don't render
   reliably inside the serif preview panel, so use labels with full tooltips. */
.app-content .panel.question { position: relative; }
.qmeta-lastrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.qmeta-lastrow .qmeta-lastmod { margin: 0; }
.q-copy-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.q-copy-btn { display: inline-flex; align-items: center; box-sizing: border-box; height: 26px; padding: 0 10px;
    border-radius: 7px; border: 1px solid var(--qx-border); background: #fff;
    font-family: var(--qx-sans); font-size: 0.72rem; font-weight: 600; line-height: 1; white-space: nowrap; }
body.app-authed a.q-copy-btn { color: #565b66; }
body.app-authed a.q-copy-btn:hover { color: var(--qx-primary); background: #f1f1f5; }
html[data-theme="dark"] .q-copy-btn { background: var(--qx-elevate); }
html[data-theme="dark"] body.app-authed a.q-copy-btn { color: var(--qx-ink); }
html[data-theme="dark"] body.app-authed a.q-copy-btn:hover { background: var(--qx-hover); }
/* Live character count tucked to the right of the "Tossup Text" label. */
.char-count-inline { float: right; font-weight: normal; color: #888; font-size: 0.85rem; }
.qmeta-flags { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; list-style: none; }
.qmeta-flags li { margin: 0; }
.qmeta-flags label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
    white-space: nowrap; margin: 0; cursor: pointer; }
.qmeta-flags input[type="checkbox"] { margin: 0; }
/* Two abreast once three would be cramped, one when even that is tight. */
@media (max-width: 1250px) { .app-content .qmeta-fields { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .app-content .qmeta-fields { grid-template-columns: 1fr; } }

/* Tidy flag checkboxes (legacy markup elsewhere). */
.edit-meta-row { margin-top: 8px; }
ul.question-flags { list-style: none; margin: 0; }
ul.question-flags li { display: inline-block; margin: 0 16px 4px 0; }
ul.question-flags label { display: inline; font-weight: normal; white-space: nowrap; }
ul.question-flags input[type="checkbox"] { margin: 0 4px 0 0; vertical-align: middle; }
/* Edit pages use the full width available (so they widen when the sidebar
   is collapsed) instead of the default content cap. */
body.edit-page-wide .app-content { max-width: none; }

/* Members who hold a role via a role group (rather than a direct assignment). */
.member-via-group { color: #777; font-style: italic; }

.rich-editor:focus {
    outline: none;
    border-color: #999;
    background-color: #fafafa;
}

.rich-editor.rich-editor-multiline {
    min-height: 16em;
}

/* Category tag insertion panel.

   Every control in here is a <button> only because clicking it runs JS — none
   of them submit. So they're deliberately styled as quiet labels and chips,
   and every one resets Foundation's 1.25rem button margin-bottom, which was
   what made a long distribution sprawl down the page. */
.category-tag-panel {
    margin: 0.5em 0 1em;
    padding: 0.5em 0.7em 0.6em;
    border: 1px solid var(--qx-border, #ddd);
    border-radius: 4px;
    background: var(--qx-card, #fff);
}

.category-tag-panel > label {
    display: block;
    margin-bottom: 0.35em;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--qx-muted, #8a8f9c);
}

.category-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
}

/* One row per category: the heading sits in a narrow left column with its
   subcategories flowing beside it, so N categories cost N rows, not 3N. */
.category-tree-group {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    padding: 0.1em 0;
    border-top: 1px solid var(--qx-border, #eee);
}

.category-tree-group:first-child {
    border-top: none;
}

.category-tree-toggle {
    /* Wide enough for the longest heading ("SOCIAL SCIENCE" plus its count) to
       sit on one line; the subcategories still start at the same column. */
    flex: 0 0 13em;
    display: block;
    width: auto;
    white-space: nowrap;
    margin: 0;
    padding: 0.25em 0;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.5;
    /* Headings are collapse handles, not links — keep them ink-colored in both
       states so they don't read as navigation. */
    color: var(--qx-muted, #8a8f9c);
    cursor: pointer;
}

.category-tree-toggle:hover,
.category-tree-toggle:focus,
.category-tree-toggle.open {
    background: none;
    color: var(--qx-ink, #20232e);
}

.category-tree-arrow {
    display: inline-block;
    width: 0.9em;
    font-size: 0.85em;
    color: #b6b9c2;
}

.category-tree-count {
    font-weight: normal;
    letter-spacing: 0;
    color: #b6b9c2;
    margin-left: 0.3em;
}

.category-tree-children {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.25em;
    padding: 0.15em 0;
}

.category-tag-btn {
    display: inline-block;
    margin: 0;
    padding: 0.1em 0.5em;
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: normal;
    line-height: 1.6;
    color: #4b5163;
    background: #f1f1f5;
    border: 1px solid var(--qx-border, #e2e2ea);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.category-tag-btn:hover,
.category-tag-btn:focus {
    background: var(--qx-primary, #6d28d9);
    color: #fff;
    border-color: var(--qx-primary, #6d28d9);
}

.category-tag-btn:active {
    background: var(--qx-primary-dark, #5b21b6);
    border-color: var(--qx-primary-dark, #5b21b6);
    color: #fff;
}

/* Unseen-activity notification badge on the My Activity button */
.activity-badge {
    display: inline-block;
    min-width: 1.2em;
    padding: 0 0.35em;
    margin-left: 0.25em;
    font-size: 0.75em;
    font-weight: bold;
    line-height: 1.4;
    color: #fff;
    background: #f04124;
    border-radius: 0.7em;
    text-align: center;
}

/* First-load-of-the-day "what changed while you were away" banner on the set
   dashboard. The whole strip is a link to the Activity page. */
.visit-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.7rem 1rem;
    border: 1px solid #b9dcf0;
    border-left: 4px solid #0b6aa8;
    border-radius: 4px;
    background: #eef6fb;
    color: #22333f;
}
.visit-summary:hover { background: #e2f0f9; color: #22333f; }
.visit-summary .fa-bell { color: #0b6aa8; }
.visit-summary-text { flex: 1; }
.visit-summary-cta { font-weight: bold; color: #0b6aa8; white-space: nowrap; }
html[data-theme="dark"] .visit-summary {
    background: #16303f;
    border-color: #2b5a75;
    border-left-color: #4aa3d8;
    color: #dce8ef;
}
html[data-theme="dark"] .visit-summary:hover { background: #1b3a4c; color: #dce8ef; }
html[data-theme="dark"] .visit-summary .fa-bell,
html[data-theme="dark"] .visit-summary-cta { color: #7cc0f4; }

/* @mention autocomplete dropdown for comment boxes */
.mention-dropdown {
    position: absolute;
    /* Above #anchor-comment-popup (1000), which is appended to the body after
       this dropdown and would otherwise paint over the suggestions. */
    z-index: 1100;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.mention-item {
    padding: 0.35em 0.6em;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
}
.mention-item.active,
.mention-item:hover {
    background: #008cba;
    color: #fff;
}
.mention-username {
    color: #888;
    font-size: 0.9em;
}
.mention-item.active .mention-username,
.mention-item:hover .mention-username {
    color: #d6eefa;
}

/* Resolved comments are dimmed and marked */
.comment-resolved {
    opacity: 0.6;
}
.comment-resolved-badge {
    float: right;
    margin-left: 0.4em;
}

/* Top nav: let the bar wrap instead of overflowing when there are many links
   (Report Bug / Search / Help / About / Profile / Log Out). */
.top-bar,
.top-bar .top-bar-section,
.top-bar .top-bar-section ul {
    height: auto;
}
.top-bar .top-bar-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.top-bar .top-bar-section .left,
.top-bar .top-bar-section .right {
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.top-bar .top-bar-section .right {
    margin-left: auto;
}
.top-bar .top-bar-section li {
    float: none;
}
.top-bar .top-bar-section li > a {
    white-space: nowrap;
}

/* Style-check page styling lives in a scoped <style> block in
   templates/style_check.html. */


/* ==========================================================================
   Redesign shell (v16): left sidebar + top bar, layered over Foundation.
   Scoped to body.app-authed so logged-out/login pages are unaffected.
   ========================================================================== */

:root {
    --qx-primary: #6d28d9;
    --qx-primary-dark: #5b21b6;
    --qx-bg: #f7f7fa;
    --qx-card: #ffffff;
    --qx-border: #e9e9ef;
    --qx-ink: #20232e;
    --qx-muted: #8a8f9c;
    --qx-sidebar-w: 250px;
    --qx-serif: Georgia, "Times New Roman", Cambria, serif;
    --qx-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.app-authed {
    margin: 0;
    background: var(--qx-bg);
    color: var(--qx-ink);
    font-family: var(--qx-sans);
}
body.app-authed a { color: var(--qx-primary); }

/* ---- Sidebar ---- */
.app-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--qx-sidebar-w);
    background: var(--qx-card); border-right: 1px solid var(--qx-border);
    display: flex; flex-direction: column; overflow-y: auto; z-index: 60;
    padding: 14px 12px 0; transition: transform .2s ease;
}
.app-brand { display: flex; align-items: center; gap: 10px; padding: 6px 6px 14px; }
.app-brand:hover { text-decoration: none; }
.app-brand-mark {
    width: 30px; height: 30px; border-radius: 8px; background: var(--qx-primary);
    color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
    font-family: var(--qx-sans);
}
.app-brand-name { font-weight: 700; font-size: 1.15rem; color: var(--qx-ink); letter-spacing: .2px; }

.app-setpicker { position: relative; display: flex; align-items: stretch; border: 1px solid var(--qx-border);
    border-radius: 10px; margin-bottom: 12px; }
.app-setpicker-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 8px 12px;
    border-radius: 10px 0 0 10px; }
.app-setpicker-main:hover { background: #f6f6fb; text-decoration: none; }
.app-setpicker-label { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--qx-muted); }
.app-setpicker-name { font-weight: 700; color: var(--qx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.app-authed .app-setpicker-toggle { flex: 0 0 auto; display: flex; align-items: center; background: none;
    border: none; border-left: 1px solid var(--qx-border); color: var(--qx-muted); cursor: pointer;
    padding: 0 12px; margin: 0; border-radius: 0 10px 10px 0; box-shadow: none; font-size: .8rem; }
body.app-authed .app-setpicker-toggle:hover { background: #f1f1f5; color: var(--qx-ink); }
.app-setpicker-menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff; border: 1px solid var(--qx-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(20,20,40,.12);
    padding: 6px; z-index: 70; max-height: 320px; overflow-y: auto; }
.app-setpicker.open .app-setpicker-menu { display: block; }
.app-setpicker-menu a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--qx-ink); font-size: .9rem; }
.app-setpicker-menu a:hover { background: #f3edfd; text-decoration: none; }
.app-setpicker-menu a.is-active { color: var(--qx-primary); font-weight: 700; }
.app-setpicker-all, .app-setpicker-new { border-top: 1px solid var(--qx-border); margin-top: 4px; }

.app-newbtns { display: flex; gap: 8px; margin-bottom: 10px; }
.app-newbtns .app-btn { flex: 1; justify-content: center; }

.app-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; padding: 8px 14px;
    font-weight: 600; font-size: .9rem; line-height: 1; cursor: pointer; border: 1px solid transparent;
    text-decoration: none; transition: background .12s, border-color .12s; }
.app-btn:hover { text-decoration: none; }
.app-btn-primary { background: var(--qx-primary); color: #fff; }
.app-btn-primary:hover { background: var(--qx-primary-dark); color: #fff; }
.app-btn-ghost { background: #fff; color: var(--qx-ink); border-color: var(--qx-border); }
.app-btn-ghost:hover { background: #f6f6fb; color: var(--qx-ink); }

.app-nav-section { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--qx-muted); padding: 16px 10px 6px; }
.app-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px;
    color: #3b3f4a; font-size: .92rem; font-weight: 500; margin-bottom: 1px; }
.app-nav-item:hover { background: #f3f3f7; color: var(--qx-ink); text-decoration: none; }
.app-nav-item.active { background: #f1e9fd; color: var(--qx-primary); font-weight: 700; }
.app-nav-item .fa { width: 18px; text-align: center; font-size: .95rem; color: var(--qx-muted); }
.app-nav-item.active .fa { color: var(--qx-primary); }
.app-nav-count { margin-left: auto; background: #ececed; color: #6b7280; font-size: .72rem;
    font-weight: 700; border-radius: 10px; padding: 1px 8px; }
.app-nav-item.active .app-nav-count { background: #e2d4fb; color: var(--qx-primary); }

.app-sidebar-foot { margin-top: auto; padding: 12px 4px 14px; position: sticky; bottom: 0;
    background: var(--qx-card); border-top: 1px solid var(--qx-border); }
.app-role { display: flex; background: #f1f1f5; border-radius: 9px; padding: 3px; margin-bottom: 10px; }
.app-role-opt { flex: 1; text-align: center; font-size: .82rem; font-weight: 600; color: var(--qx-muted);
    padding: 5px 0; border-radius: 7px; }
.app-role-opt.is-active { background: #fff; color: var(--qx-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.app-usercard { display: flex; align-items: center; gap: 1px; }
.app-usercard-main { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
    padding: 4px 4px; border-radius: 9px; }
.app-usercard-main:hover { background: #f3f3f7; text-decoration: none; }
.app-avatar { width: 32px; height: 32px; border-radius: 50%; background: #e6d8fb; color: var(--qx-primary);
    font-weight: 700; font-size: .78rem; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.app-user-meta { display: flex; flex-direction: column; min-width: 0; }
.app-user-name { font-weight: 700; font-size: .86rem; color: var(--qx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-user-sub { font-size: .74rem; color: var(--qx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Footer action icons (theme/settings/logout) stay compact so the username
   keeps room — three icons in a 250px sidebar otherwise squeeze it to "Mi". */
.app-usercard-icon { flex: 0 0 auto; color: var(--qx-muted); padding: 5px; border-radius: 7px; font-size: .92rem; }
.app-usercard-icon:hover { color: var(--qx-primary); background: #f1f1f5; }

/* ---- Main area + top bar ---- */
.app-main { margin-left: var(--qx-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .2s ease; }
.app-topbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px); border-bottom: 1px solid var(--qx-border); height: 60px;
    display: flex; align-items: center; gap: 16px; padding: 0 22px; }
/* Foundation styles bare <button> with its blue fill/margins; fully reset the
   burger so it's a plain, vertically-centered icon button. */
body.app-authed .app-sidebar-burger { display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; box-shadow: none; color: var(--qx-muted); font-size: 1.1rem;
    cursor: pointer; padding: 0 10px; margin: 0; border-radius: 8px; height: 38px; flex: 0 0 auto; }
body.app-authed .app-sidebar-burger:hover { background: #f1f1f5; color: var(--qx-ink); }
body.app-authed .app-sidebar-burger:focus { outline: none; }
.app-crumbs { display: flex; align-items: center; gap: 8px; font-size: .9rem; min-width: 0; }
.app-crumb-muted { color: var(--qx-muted); }
a.app-crumb-muted:hover { color: var(--qx-ink); }
.app-crumb-sep { color: #c8ccd4; }
.app-crumb-current { color: var(--qx-ink); font-weight: 600; }
.app-search { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; max-width: 760px; margin: 0 0 0 16px; }
.app-search-field { position: relative; flex: 1 1 auto; }
.app-search .fa-magnifying-glass { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--qx-muted); font-size: .85rem; }
/* Opens the same full text search in a new tab, so you keep your place. */
.app-search-newtab { flex: 0 0 auto; height: 38px; width: 38px; padding: 0; margin: 0; cursor: pointer;
    border: 1px solid var(--qx-border); border-radius: 10px; background: #f6f6f9; color: var(--qx-muted);
    display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; line-height: 1; }
.app-search-newtab:hover { color: var(--qx-primary); border-color: var(--qx-primary); background: #fff; }
.app-search input { width: 100%; height: 38px; border: 1px solid var(--qx-border); border-radius: 10px;
    background: #f6f6f9; padding: 0 56px 0 36px; font-size: .9rem; margin: 0; box-shadow: none; }
.app-search input:focus { background: #fff; border-color: var(--qx-primary); outline: none; }
.app-search-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: .68rem; color: var(--qx-muted); border: 1px solid var(--qx-border); border-radius: 6px; padding: 2px 6px; background: #fff; }
/* Live answer-line preview dropdown under the top search box. */
.app-search-results { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--qx-border); border-radius: 10px;
    box-shadow: 0 12px 30px rgba(20,20,40,.14); z-index: 80; max-height: 380px; overflow-y: auto; padding: 5px; }
.app-search-item { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 7px; }
.app-search-item:hover { background: #f3edfd; text-decoration: none; }
.app-search-item .ass-ans { font-weight: 600; color: var(--qx-ink); }
.app-search-item .ass-loc { font-size: .74rem; color: var(--qx-muted); }
/* Category tags on a result, as chips rather than more of the grey meta line. */
.app-search-item .ass-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.app-search-item .ass-tag { padding: 0 6px; border-radius: 8px; background: #efe6fb;
    color: #5b21b6; font-size: .68rem; line-height: 1.6; white-space: nowrap; }
.app-search-item .ass-tag-more { align-self: center; font-size: .68rem; color: var(--qx-muted); }
.app-search-empty { padding: 9px 10px; color: var(--qx-muted); font-size: .82rem; }

/* Long editable tables (distribution entries, tiebreaks) keep their column
   headers on screen while you scroll.
   
   The header sticks inside a scrolling wrapper rather than against the page.
   Sticking a <th> to the page scrollport works in Firefox but not in Chrome,
   which applies the `top` offset and never sticks -- so the header sat 60px
   down the table, over the first row, which is what a new distribution showed.
   A wrapper gives both browsers a scrollport they agree about; a table shorter
   than the wrapper simply never scrolls, and nothing moves. */
.sticky-scroll { max-height: calc(100vh - 230px); overflow: auto;
    border-radius: 12px; }
.sticky-scroll > table { margin-bottom: 0; }
/* The table reskin above gives every table overflow:hidden for its rounded
   corners, and that makes the table itself the scrollport a sticky header
   measures against -- one that never scrolls, so Chrome pinned the header
   nowhere and merely offset it. The wrapper carries the rounding instead. */
.app-content .sticky-scroll > table.sticky-head { overflow: visible; border: none; }
.sticky-head thead th { position: sticky; top: 0; z-index: 3;
    background: var(--qx-card); box-shadow: inset 0 -1px 0 var(--qx-border); }

.app-nav-badge { background: #e05260; color: #fff; }
/* Home: your sets as cards, the rest folded away below. */
.hm { display: flex; flex-direction: column; gap: 26px; padding-top: 6px; }
.hm a:hover { text-decoration: underline; }
.hm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hm-head h1 { font-family: var(--qx-serif); font-size: 2rem; margin: 0; color: var(--qx-ink); line-height: 1.2; }
.hm-head p { margin: 4px 0 0; color: var(--qx-muted); }
.hm-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.hm-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 9px; font-weight: 600;
    font-size: 0.88rem; border: 1px solid var(--qx-border); background: var(--qx-card); color: var(--qx-ink); }
body.app-authed a.hm-btn { color: var(--qx-ink); }
body.app-authed .hm a.hm-btn:hover { text-decoration: none; border-color: var(--qx-primary); color: var(--qx-ink); }
body.app-authed a.hm-btn-primary, body.app-authed .hm a.hm-btn-primary:hover { background: var(--qx-primary); border-color: var(--qx-primary); color: #fff; }
.app-content h2.hm-label, .hm-label { font-family: var(--qx-sans); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--qx-muted); margin: 0 0 10px; font-weight: 600; }
.hm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hm-card { background: var(--qx-card); border: 1px solid var(--qx-border); border-radius: 12px; padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hm-card:hover { border-color: var(--qx-primary); }
.hm-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hm-card h3 { margin: 0; font-family: var(--qx-sans); font-size: 1.05rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
body.app-authed .hm-card h3 a { color: var(--qx-ink); }
.hm-role { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px;
    border-radius: 6px; background: #f1ebfd; color: var(--qx-primary); white-space: nowrap; }
.hm-meta { color: var(--qx-muted); font-size: 0.84rem; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.hm-due-soon { color: #8a5a00; font-weight: 600; }
.hm-bar { height: 6px; border-radius: 6px; background: var(--qx-border); overflow: hidden; }
.hm-bar span { display: block; height: 100%; background: var(--qx-primary); border-radius: 6px; }
.hm-progress { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8rem; color: var(--qx-muted);
    font-variant-numeric: tabular-nums; }
.hm-progress > span:first-child { white-space: nowrap; }
.hm-progress > span:last-child { text-align: right; }
.hm-progress strong { color: var(--qx-ink); }
.hm-links { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 0.84rem; border-top: 1px solid var(--qx-border);
    padding-top: 10px; margin-top: auto; }
.hm-card-new { border-style: dashed; align-items: center; justify-content: center; color: var(--qx-muted);
    min-height: 160px; text-align: center; gap: 6px; }
body.app-authed a.hm-card-new, body.app-authed .hm a.hm-card-new:hover { text-decoration: none; color: var(--qx-muted); }
.hm-card-new strong { color: var(--qx-primary); font-size: 1rem; }
.hm-lists { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.hm-lists-one { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.hm-stack { display: flex; flex-direction: column; gap: 12px; }
.hm-panel { background: var(--qx-card); border: 1px solid var(--qx-border); border-radius: 12px; overflow: hidden; }
.hm-panel summary, .hm-ph { list-style: none; padding: 12px 16px; display: flex; justify-content: space-between;
    align-items: center; font-weight: 600; color: var(--qx-ink); }
.hm-panel summary { cursor: pointer; }
.hm-panel summary::-webkit-details-marker { display: none; }
.hm-panel summary::after { content: "\25B8"; color: var(--qx-muted); transition: transform 0.15s; }
.hm-panel[open] summary::after { transform: rotate(90deg); }
.hm-count { color: var(--qx-muted); font-weight: 500; margin-left: 6px; }
.hm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 9px 16px;
    border-top: 1px solid var(--qx-border); align-items: center; color: var(--qx-ink); }
.hm-sub { color: var(--qx-muted); font-size: 0.8rem; }
body.app-authed a.hm-join { color: var(--qx-ink); }
.hm-join { font-size: 0.8rem; font-weight: 600; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--qx-border);
    background: var(--qx-card); color: var(--qx-ink); white-space: nowrap; }
.hm .hm-join:hover { text-decoration: none; border-color: var(--qx-primary); color: var(--qx-ink); }
.hm-join.disabled { opacity: 0.6; cursor: default; }
.hm-admin { background: var(--qx-card); border: 1px solid var(--qx-border); border-radius: 12px; padding: 14px 16px; }
.hm-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 14px; }
body.app-authed .hm-admin-grid a { color: var(--qx-ink); font-size: 0.9rem; padding: 6px 0; display: flex; align-items: center; gap: 8px; }
.hm-admin-grid .fa { color: var(--qx-muted); width: 16px; text-align: center; }
.hm-badge { background: #fdecd3; color: #8a5a00; font-size: 0.72rem; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
.hm-foot { color: var(--qx-muted); font-size: 0.82rem; border-top: 1px solid var(--qx-border); padding-top: 14px; }
@media (max-width: 860px) { .hm-lists { grid-template-columns: minmax(0, 1fr); } }
html[data-theme="dark"] .hm-role { background: #2c2547; color: #b49bff; }
html[data-theme="dark"] .hm-due-soon { color: #f0c27a; }
html[data-theme="dark"] .hm-badge { background: #3d2f17; color: #f0c27a; }

.app-nav-dot { width: 7px; height: 7px; border-radius: 50%; background: #7c3aed; margin-left: auto; flex: 0 0 auto; }

/* Site news: one quiet line above the page, gone once dismissed or read. */
.news-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 10px 8px 14px;
    background: #f4effd; border: 1px solid #e0d4f8; border-radius: 10px; color: #3b2a63; font-size: 0.9rem; }
.news-bar .fa { color: #7c3aed; }
.news-bar-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-bar-read { font-weight: 600; color: #6d28d9; white-space: nowrap; }
.news-bar-close { background: none; border: 0; margin: 0; padding: 0 4px; font-size: 1.25rem; line-height: 1;
    color: #8a7fa6; cursor: pointer; }
.news-bar-close:hover { color: #3b2a63; }
html[data-theme="dark"] .news-bar { background: #2a2340; border-color: #3d3360; color: #ddd3f5; }
html[data-theme="dark"] .news-bar-read { color: #b9a2f2; }
html[data-theme="dark"] .news-bar-close:hover { color: #fff; }

.app-topbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* Uniform control height so the burger, search, and action buttons line up. */
.app-topbar .app-btn { height: 38px; padding-top: 0; padding-bottom: 0; }
.app-topbar .app-crumbs { flex: 0 1 auto; }

.app-content { padding: 18px 32px 60px; max-width: 1500px; width: 100%; }
/* The packet grid uses the full width beside the sidebar. */
body.grid-page .app-content { max-width: none; }
.app-messages { margin-bottom: 14px; }

/* ---- Foundation primitives, reskinned inside the shell ---- */
.app-content .page-header,
.app-content h1, .app-content h2 { font-family: var(--qx-serif); color: var(--qx-ink); }
.app-content h1 { font-size: 2.4rem; font-weight: 700; margin: 0 0 .35rem; }
/* The page title ("Edit Tossup" etc.) sits close under the top bar: the
   content padding alone is enough, without a heading margin on top of it. */
.app-content .page-header { font-weight: 700; margin-top: 0; margin-bottom: 0.6rem; padding-bottom: 0.3rem; }
.app-content h3.page-header { font-size: 1.8rem; }

.app-content .panel { background: var(--qx-card); border: 1px solid var(--qx-border); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20,20,40,.04); padding: 18px 20px; }
.app-content .panel.callout { background: #f7f7ff; }

.app-content .button { border-radius: 9px; font-weight: 600; background: var(--qx-primary); border: none; }
.app-content .button:hover { background: var(--qx-primary-dark); }
.app-content .button.secondary { background: #eef0f4; color: var(--qx-ink); }
.app-content .button.secondary:hover { background: #e3e6ec; }
.app-content .button.alert { background: #e05260; }
.app-content .button.success { background: #2fa860; }
.app-content .button.tiny { border-radius: 7px; }

.app-content .breadcrumbs { background: none; border: none; padding: 0; margin-bottom: 14px; }
.app-content .breadcrumbs > * { font-size: .8rem; }

/* Reskin ordinary tables, but leave purpose-built grids (e.g. the packet grid,
   which has its own sticky-column / horizontal-scroll layout) alone. */
.app-content table:not(.packet-grid) { border: 1px solid var(--qx-border); border-radius: 12px;
    border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; }
.app-content table:not(.packet-grid) thead th { background: #fafafc; color: var(--qx-muted);
    text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; border-bottom: 1px solid var(--qx-border); }
/* A tablesorter header sorts on click, but it looked like ordinary text: the
   I-beam said "select me", not "click me". The library marks every sortable
   header with .header, so this follows what is actually sortable rather than
   every table that happens to be a .tablesorter. */
.app-content table thead th.header,
.app-content table thead th.headerSortUp,
.app-content table thead th.headerSortDown { cursor: pointer; user-select: none; }
.app-content table:not(.packet-grid) td, .app-content table:not(.packet-grid) th { border: none; border-bottom: 1px solid #f1f1f4; }
.app-content table:not(.packet-grid) tr:last-child td { border-bottom: none; }
/* Dashboard tab tables (Recent Comments/Questions, Writers, Packets) should use
   the full content width instead of shrinking to their contents — otherwise the
   comment column wraps into tall, cramped rows that look cut off. */
.app-content .tabs-content table:not(.packet-grid) { width: 100%; }

.app-content input[type=text], .app-content input[type=search], .app-content input[type=email],
.app-content input[type=password], .app-content input[type=number], .app-content textarea,
.app-content select { border-radius: 9px; border: 1px solid var(--qx-border); box-shadow: none; }
.app-content input:focus, .app-content textarea:focus, .app-content select:focus { border-color: var(--qx-primary); box-shadow: none; }

.app-content .alert-box { border-radius: 10px; border: 1px solid var(--qx-border); }

/* ---- Responsive: collapse the sidebar ---- */
.app-sidebar-scrim { display: none; position: fixed; inset: 0; background: rgba(20,20,40,.4); z-index: 55; }
/* Desktop: the burger collapses the sidebar (content reflows full-width). */
@media (min-width: 901px) {
    html.app-sidebar-collapsed .app-sidebar { transform: translateX(-100%); }
    html.app-sidebar-collapsed .app-main { margin-left: 0; }
}

/* Mobile: the sidebar is off-canvas and the burger opens it over a scrim. */
@media (max-width: 900px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-main { margin-left: 0; }
    body.app-sidebar-open .app-sidebar { transform: translateX(0); }
    body.app-sidebar-open .app-sidebar-scrim { display: block; }
    .app-search-kbd { display: none; }
    .app-content { padding: 18px 16px 50px; }
}

/* ---- Phone tier: minimal, viewing-first. Optimized for reading questions and
   adding comments; editing tables are de-prioritized (they scroll). ---- */
@media (max-width: 600px) {
    .app-topbar { gap: 8px; padding: 0 12px; }
    .app-crumbs { display: none; }                 /* free up the narrow bar for search */
    .app-search { margin-left: 8px; max-width: none; }
    .app-content { padding: 12px 13px 44px; }
    .app-content h1 { font-size: 1.7rem; }
    .app-content h2, .app-content h3.page-header { font-size: 1.35rem; }
    /* Comfortable tap targets. */
    .app-content .button, .app-btn, .app-sidebar-burger { min-height: 40px; }
    .app-content input, .app-content select, .app-content textarea { font-size: 16px; } /* no iOS zoom */
    /* Data tables (editing surfaces) scroll horizontally instead of squishing. */
    .app-content table:not(.packet-grid) {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
    }
    /* Set-info redesign stacks to one column on phones (already handled inline);
       keep the sidebar a touch wider so labels fit when opened. */
    .app-sidebar { width: 84vw; max-width: 320px; }
}

/* The generic `body.app-authed a` link color above outranks .button / .app-btn
   on specificity, which would paint button text purple-on-purple (invisible).
   Force legible button text with higher-specificity rules. */
body.app-authed .app-btn-primary,
body.app-authed .app-content .button,
body.app-authed .app-content .button.primary,
body.app-authed .app-content .button.alert,
body.app-authed .app-content .button.success,
body.app-authed .app-content a.button { color: #fff; }
body.app-authed .app-btn-ghost,
body.app-authed .app-content .button.secondary,
body.app-authed .app-content a.button.secondary { color: var(--qx-ink); }
/* Keep the sidebar nav links their intended ink/active colors, not link-purple. */
body.app-authed a.app-nav-item { color: #3b3f4a; }
body.app-authed a.app-nav-item.active { color: var(--qx-primary); }
body.app-authed a.app-nav-item:hover { color: var(--qx-ink); }

/* ============================================================================
   Dark theme. Opt-in via the sidebar toggle (persisted in localStorage and
   applied as html[data-theme="dark"] before first paint). Most of the app
   shell already paints from the --qx-* tokens, so redefining those does the
   bulk of the work; the rules below cover the hardcoded light surfaces and the
   Foundation defaults (panels, tables, inputs, buttons) that don't.
   ============================================================================ */

/* ---- Home page: public sets ------------------------------------------------
   The public list is a plain table on the page while everything above it sits
   in a panel, so it read as a different page. It gets the same card the rest of
   the app uses, and its note/footer colours come from the theme rather than
   from inline styles that only ever knew about the light one. */
.home-card {
    background: var(--qx-card, #fff);
    border: 1px solid var(--qx-border, #e9e9ef);
    border-radius: 12px;
    padding: 6px 18px 2px;
    margin: 0 0 1.25rem;
    box-shadow: 0 1px 2px rgba(20, 20, 40, .04);
}
.home-card table { margin-bottom: 0.5rem; }
.home-note { color: var(--qx-muted, #8a8f9c); }
.home-about {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--qx-border, #ececf0);
    color: var(--qx-muted, #8a8f9c);
    font-size: 0.9rem;
}

/* Selected text. The page never said what selection should look like, so the
   browser painted its own pale blue behind whatever colour the theme had given
   the text — which on dark meant light ink on a light band, i.e. a row you
   can't read the moment you drag across it. */
::selection { background: #ddd0ff; color: #20232e; }
::-moz-selection { background: #ddd0ff; color: #20232e; }


/* A page's actions sit in their own row under the breadcrumbs. Floating one
   into the <h3> put it on top of the heading's underline. */
.cat-actions { margin: 0 0 12px; }
.cat-actions .button, .cat-doc-btn { margin: 0; }

/* Rows that head a group in the category tables, and the soft amber panels.
   These used to be inline style attributes, which no theme can override —
   an inline colour beats every stylesheet rule. */
.cat-group-row { font-weight: bold; background-color: #f0f0f0; }
.cat-added-row { background-color: #d9edf7; }
.panel-soft-warning { background: #fff8e1; border: 1px solid #f0d99b; }

html[data-theme="dark"] {
    --qx-primary: #8b5cf6;
    --qx-primary-dark: #7c3aed;
    --qx-bg: #15161b;
    --qx-card: #1e2026;
    --qx-border: #2f323c;
    --qx-ink: #e6e7ea;
    --qx-muted: #9aa0ad;
    --qx-elevate: #262932;   /* table headers, subtle fills */
    --qx-hover: #2a2d37;     /* hover backgrounds */
}

html[data-theme="dark"] body { background: var(--qx-bg); color: var(--qx-ink); }
html[data-theme="dark"] body.app-authed a { color: #a78bfa; }

/* App shell surfaces */
html[data-theme="dark"] .app-sidebar,
html[data-theme="dark"] .app-sidebar-foot,
html[data-theme="dark"] .app-topbar { background: var(--qx-card); border-color: var(--qx-border); }
html[data-theme="dark"] .app-brand-name,
html[data-theme="dark"] .app-setpicker-name { color: var(--qx-ink); }
html[data-theme="dark"] .app-setpicker { background: var(--qx-elevate); border-color: var(--qx-border); }
html[data-theme="dark"] .app-setpicker-main:hover,
html[data-theme="dark"] body.app-authed .app-setpicker-toggle:hover { background: var(--qx-hover); }
html[data-theme="dark"] .app-setpicker-menu { background: var(--qx-card); border-color: var(--qx-border); }
html[data-theme="dark"] .app-setpicker-menu a { color: var(--qx-ink); }
html[data-theme="dark"] .app-setpicker-menu a:hover { background: var(--qx-hover); }
html[data-theme="dark"] .app-btn-ghost { background: var(--qx-elevate); color: var(--qx-ink); }
html[data-theme="dark"] .app-btn-ghost:hover { background: var(--qx-hover); }
html[data-theme="dark"] .app-nav-item:hover { background: var(--qx-hover); color: var(--qx-ink); }
html[data-theme="dark"] .app-nav-item.active { background: #2a2147; color: #c4b5fd; }
html[data-theme="dark"] .app-nav-item.active .fa,
html[data-theme="dark"] .app-nav-item.active .app-nav-count { color: #c4b5fd; }
html[data-theme="dark"] .app-nav-count { background: #2f323c; color: #b7bcc7; }
html[data-theme="dark"] .app-nav-item.active .app-nav-count { background: #3b2f63; }
html[data-theme="dark"] body.app-authed a.app-nav-item { color: #c9ccd3; }
html[data-theme="dark"] body.app-authed a.app-nav-item:hover { color: var(--qx-ink); }
html[data-theme="dark"] body.app-authed a.app-nav-item.active { color: #c4b5fd; }
html[data-theme="dark"] .app-role { background: var(--qx-elevate); }
html[data-theme="dark"] .app-role-opt.is-active { background: var(--qx-card); color: var(--qx-ink); }
html[data-theme="dark"] .app-usercard-main:hover,
html[data-theme="dark"] .app-usercard-icon:hover,
html[data-theme="dark"] body.app-authed .app-sidebar-burger:hover { background: var(--qx-hover); }
html[data-theme="dark"] .app-avatar { background: #3b2f63; color: #c4b5fd; }

/* Top search box */
html[data-theme="dark"] .app-search input { background: var(--qx-elevate); color: var(--qx-ink); border-color: var(--qx-border); }
html[data-theme="dark"] .app-search-newtab { background: var(--qx-elevate); border-color: var(--qx-border); }
html[data-theme="dark"] .app-search-newtab:hover { background: var(--qx-card); }
html[data-theme="dark"] .app-search input:focus { background: var(--qx-card); }
html[data-theme="dark"] .app-search input::placeholder { color: var(--qx-muted); }
html[data-theme="dark"] .app-search-kbd { background: var(--qx-elevate); }
html[data-theme="dark"] .app-search-results { background: var(--qx-card); border-color: var(--qx-border); }
html[data-theme="dark"] .app-search-item:hover { background: var(--qx-hover); }
html[data-theme="dark"] .app-search-item .ass-tag { background: var(--qx-elevate); color: var(--qx-text); }

/* Content: headings, cards, panels */
html[data-theme="dark"] .app-content,
html[data-theme="dark"] .app-content h1,
html[data-theme="dark"] .app-content h2,
html[data-theme="dark"] .app-content h3,
html[data-theme="dark"] .app-content h4,
html[data-theme="dark"] .app-content h5,
html[data-theme="dark"] .app-content .page-header { color: var(--qx-ink); }
html[data-theme="dark"] .app-content .panel,
html[data-theme="dark"] .app-content .panel.question { background: var(--qx-card); border-color: var(--qx-border); color: var(--qx-ink); }
html[data-theme="dark"] .app-content .panel.callout { background: #211d33; }
html[data-theme="dark"] .app-content .qmeta-row { background: var(--qx-elevate); border-color: var(--qx-border); }

/* Tables */
html[data-theme="dark"] .app-content table:not(.packet-grid) { background: var(--qx-card); border-color: var(--qx-border); color: var(--qx-ink); }
html[data-theme="dark"] .app-content table:not(.packet-grid) thead th { background: var(--qx-elevate); color: var(--qx-muted); border-color: var(--qx-border); }
html[data-theme="dark"] .app-content table:not(.packet-grid) td,
html[data-theme="dark"] .app-content table:not(.packet-grid) th { border-color: var(--qx-border); }
html[data-theme="dark"] .app-content .table-striped tbody tr:nth-child(even),
html[data-theme="dark"] .app-content table:not(.packet-grid) tbody tr:nth-child(even) { background: #23252d; }
/* Foundation puts the hover fill on the CELLS (.table-hover tbody tr:hover td),
   so a rule on the row is painted straight over — which is why a hovered row
   stayed pale blue on dark however dark the row itself was. */
html[data-theme="dark"] .app-content .table-hover tbody tr.even:hover td,
html[data-theme="dark"] .app-content .table-hover tbody tr:nth-child(even):hover td,
html[data-theme="dark"] .app-content .table-hover tbody tr:hover td,
html[data-theme="dark"] .app-content .table-hover tbody tr:hover,
html[data-theme="dark"] .app-content table:not(.packet-grid) tbody tr:hover { background: var(--qx-hover); }

/* Inputs */
html[data-theme="dark"] .app-content input[type=text],
html[data-theme="dark"] .app-content input[type=search],
html[data-theme="dark"] .app-content input[type=email],
html[data-theme="dark"] .app-content input[type=password],
html[data-theme="dark"] .app-content input[type=number],
html[data-theme="dark"] .app-content textarea,
html[data-theme="dark"] .app-content select,
html[data-theme="dark"] .rich-editor { background: var(--qx-elevate); color: var(--qx-ink); border-color: var(--qx-border); }
html[data-theme="dark"] .app-content input::placeholder,
html[data-theme="dark"] .app-content textarea::placeholder { color: var(--qx-muted); }

/* The tab row is a flex row (app.min.css), so every cell is as tall as the
   tallest -- but the grey is on the link inside, which kept its own height:
   when a long label ("Writers and Editors") wrapped to two lines, its tab
   stood taller than "Settings" beside it. The link fills its cell, with the
   label centred. (app.min.css aligns the cell's contents to the baseline,
   which is what kept the link short.) */
.app-content dl.tabs > dd,
.app-content dl.tabs > .tab-title { display: flex; align-items: stretch; }
.app-content dl.tabs > dd > a,
.app-content dl.tabs > .tab-title > a {
    display: flex; align-items: center; justify-content: center;
    width: 100%; text-align: center;
}

/* Foundation tabs */
html[data-theme="dark"] .app-content .tabs dd > a,
html[data-theme="dark"] .app-content .tabs .tab-title > a { background: var(--qx-elevate); color: var(--qx-ink); }
html[data-theme="dark"] .app-content .tabs dd.active > a,
html[data-theme="dark"] .app-content .tabs .tab-title.active > a { background: var(--qx-card); color: var(--qx-ink); }

/* Foundation alert/info boxes keep their accent but go on a dark fill */
html[data-theme="dark"] .app-content .alert-box { background: var(--qx-elevate); color: var(--qx-ink); border-color: var(--qx-border); }
html[data-theme="dark"] .app-content .alert-box.success { background: #16301f; }
html[data-theme="dark"] .app-content .alert-box.warning { background: #3a2e12; }
html[data-theme="dark"] .app-content .alert-box.alert { background: #3a1d1d; }


/* Foundation colours table cells (#222) and their borders (white) on the cell
   itself, not on the table, so the dark fill above wasn't enough: text sat
   almost invisibly on it and every border drew as a white grid line. */
html[data-theme="dark"] .app-content table:not(.packet-grid) td,
html[data-theme="dark"] .app-content table:not(.packet-grid) th { color: var(--qx-ink); }
html[data-theme="dark"] .app-content table:not(.packet-grid) tbody tr td { border-color: var(--qx-border); }
html[data-theme="dark"] .app-content table:not(.packet-grid) tr:nth-of-type(even) { background: #23252d; }

/* Foundation accordions (the set lists on the home page). Foundation paints the
   title bar, the open panel and the cells inside it light, with no dark variant
   of its own, so the whole block arrived as a bright slab. */
html[data-theme="dark"] .app-content .accordion .accordion-navigation > a,
html[data-theme="dark"] .app-content .accordion dd > a {
    background: var(--qx-elevate);
    color: var(--qx-ink);
}
html[data-theme="dark"] .app-content .accordion .accordion-navigation.active > a,
html[data-theme="dark"] .app-content .accordion dd.active > a,
html[data-theme="dark"] .app-content .accordion .accordion-navigation > a:hover,
html[data-theme="dark"] .app-content .accordion dd > a:hover { background: var(--qx-hover); }
html[data-theme="dark"] .app-content .accordion .accordion-navigation > .content,
html[data-theme="dark"] .app-content .accordion .accordion-navigation > .content.active,
html[data-theme="dark"] .app-content .accordion dd > .content,
html[data-theme="dark"] .app-content .accordion dd > .content.active {
    background: var(--qx-card);
    color: var(--qx-ink);
}
html[data-theme="dark"] .app-content .accordion table tbody tr td { background-color: transparent; }
html[data-theme="dark"] .app-content .accordion table thead tr th,
html[data-theme="dark"] .app-content .accordion table tbody tr td { border-color: var(--qx-border); }

/* Foundation gives every label #4d4d4d, which on dark is barely there. Rules
   further down deliberately mute particular labels (the Set Information field
   captions); those are equally specific and come later, so they still win. */
html[data-theme="dark"] .app-content label { color: var(--qx-ink); }

/* Foundation puts #333 on a panel's children, not on the panel, so panel text
   stayed dark on the dark fill the theme gives it. */
html[data-theme="dark"] .app-content .panel h1,
html[data-theme="dark"] .app-content .panel h2,
html[data-theme="dark"] .app-content .panel h3,
html[data-theme="dark"] .app-content .panel h4,
html[data-theme="dark"] .app-content .panel h5,
html[data-theme="dark"] .app-content .panel h6,
html[data-theme="dark"] .app-content .panel p,
html[data-theme="dark"] .app-content .panel li,
html[data-theme="dark"] .app-content .panel dl { color: var(--qx-ink); }

/* Foundation's progress track is white on white; on dark it was a bright pill
   with a sliver of green in it. */
html[data-theme="dark"] .app-content .progress {
    background-color: var(--qx-elevate);
    border-color: var(--qx-border);
}

/* Home page cards */
html[data-theme="dark"] .home-card { background: var(--qx-card); border-color: var(--qx-border); box-shadow: none; }

/* Set Information card (edit_question_set). Its own stylesheet is inline in the
   template and was written in light-theme hex, so the card stayed white while
   everything in it went dark. */
html[data-theme="dark"] .set-info-card {
    background: var(--qx-card);
    border-color: var(--qx-border);
    box-shadow: none;
}
html[data-theme="dark"] .set-info-heading { color: var(--qx-ink); }
html[data-theme="dark"] .set-info-field > label { color: var(--qx-muted); }
html[data-theme="dark"] .set-info-checks { border-top-color: var(--qx-border); }
html[data-theme="dark"] .set-info-check, html[data-theme="dark"] .set-info-num { color: var(--qx-ink); }
html[data-theme="dark"] .set-info-check small, html[data-theme="dark"] .set-info-num small { color: var(--qx-muted); }
/* Same stylesheet, same problem: the Writers-and-Editors tag chips and the
   join-link box. */
html[data-theme="dark"] .editor-tag { background: #2f323c; color: var(--qx-ink); }
html[data-theme="dark"] .editor-tag-cat { background: #1f3a26; color: #a5d6a7; }
html[data-theme="dark"] .join-link-row input { background: var(--qx-elevate); color: var(--qx-ink); }
html[data-theme="dark"] .join-link-off { color: #f0a868; }


/* ---- Packet grid --------------------------------------------------------
   The grid has its own stylesheet in packet_grid.html, written in light-theme
   hex, and it is the one table the generic dark rules deliberately skip (it
   paints its own cells). Everything it paints gets a dark counterpart here. */
/* The generic table rules skip .packet-grid, so it needs its own surface too —
   without this the odd (unstriped) rows kept Foundation's white. */
html[data-theme="dark"] .packet-grid { background: var(--qx-card); }
html[data-theme="dark"] .packet-grid thead th { background: var(--qx-elevate); }
html[data-theme="dark"] .packet-grid th.num-col,
html[data-theme="dark"] .packet-grid td.num-col { background-color: var(--qx-elevate); }
html[data-theme="dark"] .packet-grid tbody tr:nth-child(even) { background-color: #23252d; }
html[data-theme="dark"] .packet-grid .tiebreaker-row { background-color: #2a2820 !important; }
html[data-theme="dark"] .packet-grid td,
html[data-theme="dark"] .packet-grid th { border-color: var(--qx-border); color: var(--qx-ink); }
html[data-theme="dark"] .grid-cell.drag-over { background-color: #1b3646 !important; }
html[data-theme="dark"] .grid-cell-empty:hover { background-color: #1d2c22 !important; }
html[data-theme="dark"] .cell-category,
html[data-theme="dark"] .cell-removed-cat,
html[data-theme="dark"] .unp-counts,
html[data-theme="dark"] .unp-help,
html[data-theme="dark"] .unp-item .unp-category,
html[data-theme="dark"] .unp-none,
html[data-theme="dark"] .swap-candidate .swap-cand-category { color: var(--qx-muted); }
html[data-theme="dark"] .tag-edited { background: #1e3348; color: #93c5fd; }
html[data-theme="dark"] .tag-proofread { background: #1c3527; color: #86d29d; }
html[data-theme="dark"] .grid-hbar { background: var(--qx-elevate); border-top-color: var(--qx-border); }
html[data-theme="dark"] .grid-helper,
html[data-theme="dark"] .packet-order-item.ui-sortable-helper { background: var(--qx-card); color: var(--qx-ink); }
html[data-theme="dark"] .packet-order-item { background: var(--qx-elevate); }
html[data-theme="dark"] .swap-candidate:hover { background-color: #1b3646; }
/* The live-refresh flash has to be its own keyframes: a rule can't repaint
   the colours inside an animation. */
html[data-theme="dark"] .grid-cell-updated { animation: grid-cell-flash-dark 2.5s ease-out; }
@keyframes grid-cell-flash-dark {
    0%   { background-color: #4a3f14; }
    60%  { background-color: #2f2a15; }
    100% { background-color: transparent; }
}
/* Unpacketized / unplaced panels */
html[data-theme="dark"] .unpacketized-panel { background: var(--qx-card); border-color: var(--qx-border); }
html[data-theme="dark"] .unpacketized-panel.drop-target { background: #16303f; }
html[data-theme="dark"] .unp-list { background: var(--qx-elevate); border-color: var(--qx-border); }
html[data-theme="dark"] .unp-item { background: #22303d; border-color: #2f4557; color: var(--qx-ink); }
html[data-theme="dark"] .unplaced-panel { background: #33301c; border-color: #6b5b23; }
html[data-theme="dark"] .unplaced-item { border-top-color: #4a4225; }
html[data-theme="dark"] .unplaced-reason { color: #f0a868; }

/* ---- Document view ------------------------------------------------------
   The page emulates a printed packet, so in light mode it is deliberately a
   sheet of white paper. On dark that left a glaring white slab whose headings
   (themed light by the rules above) had vanished into it. */
html[data-theme="dark"] .doc-page {
    background: var(--qx-card);
    border-color: var(--qx-border);
    color: var(--qx-ink);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .doc-question:hover { background-color: #1e2530; border-color: #33465c; }
html[data-theme="dark"] .doc-reorder-mode .doc-question:hover { background-color: #2b2716; border-color: #6b5b23; }
html[data-theme="dark"] .doc-question.ui-sortable-helper { background: var(--qx-elevate); }
html[data-theme="dark"] .doc-packet-count,
html[data-theme="dark"] .doc-mode-hint,
html[data-theme="dark"] .doc-category-line,
html[data-theme="dark"] .doc-swap-candidate .swap-cand-category { color: var(--qx-muted); }
html[data-theme="dark"] .doc-tag { background: var(--qx-elevate); color: var(--qx-muted); }
html[data-theme="dark"] .doc-tag-edited { background: #1c3527; color: #86d29d; }
html[data-theme="dark"] .doc-tag-unedited { background: #33301c; color: #e0c169; }
html[data-theme="dark"] .doc-tag-overlength { background: #3a1d1d; color: #f08c8c; }
html[data-theme="dark"] .doc-style-issues { background: #2b2716; border-color: #4a4225; }
html[data-theme="dark"] .doc-swap-candidate:hover { background-color: #1b3646; }
html[data-theme="dark"] #doc-context-menu { background: var(--qx-card); border-color: var(--qx-border); }
html[data-theme="dark"] #doc-context-menu .doc-ctx-item { color: var(--qx-ink); }
html[data-theme="dark"] .doc-tb { color: #e0c169; }
html[data-theme="dark"] .swap-row:hover { background: #1e2530; }
html[data-theme="dark"] .swap-row.selected { background: #1b3646; }
html[data-theme="dark"] .callout-extras { background: #16303f; border-color: #2b5a75; }
html[data-theme="dark"] .callout-extras a { color: #7fc7e8; }
html[data-theme="dark"] .callout-careful { background: #33301c; border-color: #6b5b23; }


/* ---- Style check (page and the panel on the edit pages) ------------------ */
html[data-theme="dark"] .bulk-bar { background: var(--qx-card); border-color: var(--qx-border); }
html[data-theme="dark"] .sc-config { background: var(--qx-elevate); border-color: var(--qx-border); }
html[data-theme="dark"] .sc-counts,
html[data-theme="dark"] .sc-config-help,
html[data-theme="dark"] .bulk-bar .sc-bulk-label,
html[data-theme="dark"] .sc-guide-note,
html[data-theme="dark"] .pg-context,
html[data-theme="dark"] .style-panel-note,
html[data-theme="dark"] .style-panel-issues .pg-context { color: var(--qx-muted); }
html[data-theme="dark"] .pg-context strong,
html[data-theme="dark"] .style-panel-issues .pg-context strong { color: var(--qx-ink); }
html[data-theme="dark"] .sc-pill.zero { background: var(--qx-elevate); color: var(--qx-muted); }
html[data-theme="dark"] .sc-fix,
html[data-theme="dark"] .style-panel-issues .sc-fix { background: #1c3527; color: #86d29d; }
html[data-theme="dark"] .sc-fix:hover,
html[data-theme="dark"] .style-panel-issues .sc-fix:hover { background: #234432; }
html[data-theme="dark"] .sc-fix-open { background: #1e3348; color: #93c5fd; }
html[data-theme="dark"] .sc-fix-open:hover { background: #26405a; }
html[data-theme="dark"] .sc-just-fixed { background-color: #1c3527 !important; }
html[data-theme="dark"] .ai-grammar-msg strong,
html[data-theme="dark"] .ai-grammar-msg .ai-alt-ans,
html[data-theme="dark"] .style-panel-issues .grammar-fix { color: #86d29d; }
html[data-theme="dark"] .ai-grammar-msg del { color: #f08c8c; }


/* ---- Templates that style themselves in light-theme hex ------------------
   Swept mechanically (scratchpad audit_greys.py / gen_dark.py) rather than one
   page at a time: neutral greys take the theme's tokens, and a light tint that
   is carrying meaning — the pale green of a correct bonus part, the pale blue
   of a callout — keeps its hue and moves to a dark version of it. */
/* _comment_discord.html */
html[data-theme="dark"] .comment-discord { background: #16303f; }
html[data-theme="dark"] tr.comment-discord { background: #16303f; }

/* _new_question_checks.html */
html[data-theme="dark"] .nq-checks { background: #16303f; }

/* _playtest_results.html */
html[data-theme="dark"] .pt-heard { color: var(--qx-muted); }
html[data-theme="dark"] .result-idk { color: var(--qx-muted); }

/* _suggested_changes.html */
html[data-theme="dark"] .suggested-changes .suggestion-item { background: var(--qx-card); }
html[data-theme="dark"] .suggested-changes .suggestion-meta { color: var(--qx-muted); }
html[data-theme="dark"] .suggested-changes .suggestion-note { color: var(--qx-muted); }

/* _swap_dialog.html */
html[data-theme="dark"] .edit-swap-candidate .swap-cand-category { color: var(--qx-muted); }

/* api_access.html */
html[data-theme="dark"] .key-meta { color: var(--qx-muted); }

/* attach_role_group.html */
html[data-theme="dark"] .arg-option { background: var(--qx-card); }
html[data-theme="dark"] .arg-attached:hover { border-color: var(--qx-border); }
html[data-theme="dark"] .arg-badge { background: #1c3527; }

/* bonus_history.html */
html[data-theme="dark"] .history-version-highlight { background: #16303f; }

/* category_document.html */
html[data-theme="dark"] .cat-doc-meta { color: var(--qx-muted); }
html[data-theme="dark"] .cat-doc-text .pronunciation-guide { color: var(--qx-muted); }
html[data-theme="dark"] .cat-doc-meta a { color: var(--qx-ink); }

/* category_overview.html */
html[data-theme="dark"] .cat-editor-tag { background: #1c3527; }

/* category_problems.html */
html[data-theme="dark"] .cp-intro { color: var(--qx-muted); }
html[data-theme="dark"] .cp-bulk-bar { background: var(--qx-card); }

/* compare_repeats.html */
html[data-theme="dark"] .cr-legend { color: var(--qx-muted); }
html[data-theme="dark"] .cr-answer { color: var(--qx-ink); }
html[data-theme="dark"] .cr-preview { color: var(--qx-muted); }

/* create_question_set.html */
html[data-theme="dark"] .cqs-card { background: var(--qx-card); }

/* edit_packet.html */
html[data-theme="dark"] #packet-status-tossup-table .status-subcat td:first-child, html[data-theme="dark"] #packet-status-bonus-table .status-subcat td:first-child { color: var(--qx-muted); }

/* packet_grid.html */
html[data-theme="dark"] .grid-cell:hover .swap-btn { color: var(--qx-muted); }
html[data-theme="dark"] .packet-grid th.num-col, html[data-theme="dark"] .packet-grid td.num-col { background: var(--qx-elevate); }
html[data-theme="dark"] .unplaced-item .unp-category { color: var(--qx-muted); }

/* play.html */
html[data-theme="dark"] .cats-hint { color: var(--qx-muted); }
html[data-theme="dark"] .loaded-count { color: var(--qx-muted); }
html[data-theme="dark"] #scoreboard { background: var(--qx-card); }
html[data-theme="dark"] .play-card { background: var(--qx-card); }
html[data-theme="dark"] .reveal-hint { color: var(--qx-muted); }
html[data-theme="dark"] .reveal-answer { background: #16303f; }
html[data-theme="dark"] .bonus-part .part-answer { background: #16303f; }
html[data-theme="dark"] .bonus-part.part-correct { background: #1c3527; }
html[data-theme="dark"] .bonus-part.part-incorrect { background: #3a1d1d; }
html[data-theme="dark"] .post-card { background: var(--qx-card); }
html[data-theme="dark"] .posted-comment { background: #16303f; }
html[data-theme="dark"] #play-meta { color: var(--qx-muted); }

/* quick_search.html */
html[data-theme="dark"] .qs-meta { color: var(--qx-muted); }

/* recap.html */
html[data-theme="dark"] .recap-since-visit { background: #16303f; }

/* reference_data.html */
html[data-theme="dark"] .refdata-source { background: var(--qx-elevate); }
html[data-theme="dark"] .refdata-source-edited { background: #16303f; }
html[data-theme="dark"] .refdata-source-added { background: #1c3527; }

/* role_groups.html */
html[data-theme="dark"] .member-search-results { background: var(--qx-card); }
html[data-theme="dark"] .member-search-item:hover, html[data-theme="dark"] .member-search-item.active { background: #16303f; }

/* splash.html */
html[data-theme="dark"] .splash-tagline { color: var(--qx-muted); }
html[data-theme="dark"] .splash-lineage { color: var(--qx-muted); }

/* style_ignored.html */
html[data-theme="dark"] .si-intro { color: var(--qx-muted); }
html[data-theme="dark"] .si-note { color: var(--qx-muted); }
html[data-theme="dark"] .si-code { background: var(--qx-elevate); color: var(--qx-muted); }
html[data-theme="dark"] .si-table th { color: var(--qx-muted); }

/* view_packet.html */
html[data-theme="dark"] .swap-row-answer { color: var(--qx-ink); }
html[data-theme="dark"] .doc-question .pronunciation-guide { color: var(--qx-muted); }
html[data-theme="dark"] .doc-placeholder { background: #16303f; }
html[data-theme="dark"] .doc-comment-card { background: var(--qx-card); }
html[data-theme="dark"] .doc-comment-author { color: var(--qx-ink); }
html[data-theme="dark"] .doc-comment-text { color: var(--qx-ink); }
html[data-theme="dark"] .doc-comment-reply .doc-comment-author { color: var(--qx-muted); }
html[data-theme="dark"] .doc-resolved-badge { background: #1c3527; }
html[data-theme="dark"] .doc-comment-box { background: var(--qx-card); }
html[data-theme="dark"] .doc-anchor-quote { color: var(--qx-muted); }

/* The rich editor's toolbar (base.css, not a template) was the last light slab
   on the edit pages: a white bar of white buttons over a dark editor. */
html[data-theme="dark"] .rich-editor-toolbar {
    background-color: var(--qx-elevate);
    border-color: var(--qx-border);
}
html[data-theme="dark"] .rich-editor-toolbar a.rich-editor-btn {
    background-color: var(--qx-card);
    border-color: var(--qx-border);
    color: var(--qx-ink);
    box-shadow: none;
}
html[data-theme="dark"] .rich-editor-toolbar a.rich-editor-btn:hover {
    background-color: var(--qx-hover);
    border-color: #4a4f5c;
}
html[data-theme="dark"] .rich-editor-toolbar a.rich-editor-btn:active,
html[data-theme="dark"] .rich-editor-toolbar a.rich-editor-btn.active {
    background-color: #33384a;
}
html[data-theme="dark"] .rich-editor-toolbar a.rich-editor-btn.rich-editor-pg { color: #f0a868; }

html[data-theme="dark"] .rich-editor-symbols {
    background: var(--qx-card);
    border-color: var(--qx-border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .rich-editor-symbols .sym-heading { color: var(--qx-ink); }
html[data-theme="dark"] .rich-editor-symbols .sym-label { color: var(--qx-muted); }
html[data-theme="dark"] .rich-editor-symbols a.sym-btn { color: var(--qx-ink); }
html[data-theme="dark"] .rich-editor-symbols a.sym-btn:hover {
    background: var(--qx-hover);
    border-color: #4a4f5c;
}
html[data-theme="dark"] .rich-editor-symbols .sym-caps,
html[data-theme="dark"] .rich-editor-symbols .sym-close {
    background: var(--qx-elevate);
    border-color: var(--qx-border);
    color: var(--qx-ink);
}
html[data-theme="dark"] .rich-editor-symbols .sym-caps:hover,
html[data-theme="dark"] .rich-editor-symbols .sym-close:hover {
    background: var(--qx-hover);
    border-color: #4a4f5c;
}

html[data-theme="dark"] ::selection { background: #4a3a80; color: #f4f2fb; }
html[data-theme="dark"] ::-moz-selection { background: #4a3a80; color: #f4f2fb; }


/* ---- Status tints -------------------------------------------------------
   The grey sweep left these alone on purpose: the colour is the message
   (green = done, amber = outstanding, red = removed), so each needs a dark
   version of its own hue rather than a neutral token. Pale fill + dark ink
   becomes dark fill + light ink, the same pairs used for the doc-view tags. */
html[data-theme="dark"] .tag-complete { background-color: #1c3527; color: #86d29d; }
html[data-theme="dark"] .tag-incomplete { background-color: #33301c; color: #e0c169; }
html[data-theme="dark"] .tag-group-header { border-bottom-color: var(--qx-border); }

html[data-theme="dark"] .sc-just-fixed { background-color: #1c3527 !important; }

html[data-theme="dark"] .suggested-changes .suggestion-diff del {
    background: #3a1d1d; color: #f08c8c;
}
html[data-theme="dark"] .suggested-changes .suggestion-diff ins {
    background: #1c3527; color: #86d29d;
}

html[data-theme="dark"] .edit-swap-candidate:hover { background: #1b3646; }
html[data-theme="dark"] #qs-results mark { background: #4a4215; color: var(--qx-ink); }

/* Doc view: the swap chip, and the amber "this comment is anchored here" band */
html[data-theme="dark"] .doc-comment-selection,
html[data-theme="dark"] .doc-anchor-quote {
    background: #2b2716;
    color: #e0c169;
    border-left-color: #8a6d1e;
}
html[data-theme="dark"] .doc-comment-selection .fa { color: #e0c169; }
html[data-theme="dark"] .doc-question.doc-commented-highlight {
    background-color: #2b2716;
    border-color: #8a6d1e;
}

/* The anchored-comment highlight inside question text (base.css, light hex) */
html[data-theme="dark"] .anchored-highlight {
    background-color: #4a4215;
    border-bottom-color: #e0c169;
}
html[data-theme="dark"] .anchored-highlight.active,
html[data-theme="dark"] .anchored-highlight:hover { background-color: #6b5f1d; }

html[data-theme="dark"] .cat-group-row { background-color: var(--qx-elevate); }
html[data-theme="dark"] .cat-added-row { background-color: #16303f; }
html[data-theme="dark"] .panel-soft-warning { background: #33301c; border-color: #6b5b23; }

/* Secondary buttons on dark */
html[data-theme="dark"] .app-content .button.secondary,
html[data-theme="dark"] .app-content a.button.secondary,
html[data-theme="dark"] body.app-authed .app-content .button.secondary { background: var(--qx-elevate); color: var(--qx-ink); }

/* Comments sidebar */
html[data-theme="dark"] .edit-comments { border-color: var(--qx-border); }
html[data-theme="dark"] .edit-comments .ec-card { background: var(--qx-card); border-color: var(--qx-border); }
html[data-theme="dark"] .edit-comments .ec-card:hover { border-color: #4a4f5c; }
html[data-theme="dark"] .ec-body { color: var(--qx-ink); }
html[data-theme="dark"] .ec-chip-discord { background: #302a55; color: #c3b3f5; }
html[data-theme="dark"] .ec-chip-resolved { background: #1c3527; color: #7fc79a; }
html[data-theme="dark"] .edit-comments .comment-resolved { background: #1b2620; }
html[data-theme="dark"] .edit-comments .comment-resolved .ec-body,
html[data-theme="dark"] .edit-comments .comment-resolved .ec-who { color: #8fa397; }
html[data-theme="dark"] .ec-replies { border-left-color: #3b3560; }
/* The dark link colour is set on body.app-authed a, which outranks the light-mode rule for this one. */
html[data-theme="dark"] body.app-authed .edit-comments .ec-delete-all,
html[data-theme="dark"] body.app-authed .edit-comments .ec-actions a {
    color: var(--qx-muted, #9aa0ad); }
html[data-theme="dark"] body.app-authed .edit-comments .ec-actions a:hover { color: #7cc0f4; }
html[data-theme="dark"] body.app-authed .edit-comments .ec-delete-all:hover,
html[data-theme="dark"] body.app-authed .edit-comments .ec-actions a.ec-danger:hover { color: #f08c8c; }
html[data-theme="dark"] .comment-quote, html[data-theme="dark"] .ec-quote {
    background: #3a2f1c; border-left-color: #6b5426; color: #e2c78a; }

/* The theme toggle button in the sidebar footer — kept the same compact size
   as the gear/logout icons so the username row doesn't get squeezed. */
.app-theme-toggle { background: none; border: none; cursor: pointer; color: var(--qx-muted);
    flex: 0 0 auto; padding: 5px; margin: 0; border-radius: 7px; font-size: .92rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; }
.app-theme-toggle:hover { color: var(--qx-primary); background: #f1f1f5; }
html[data-theme="dark"] .app-theme-toggle:hover { background: var(--qx-hover); }

/* Category tag picker on dark: the chips keep their quiet-label read. */
html[data-theme="dark"] .category-tag-btn {
    background: var(--qx-elevate); color: var(--qx-ink); border-color: var(--qx-border);
}
html[data-theme="dark"] .category-tag-btn:hover,
html[data-theme="dark"] .category-tag-btn:focus {
    background: var(--qx-primary); border-color: var(--qx-primary); color: #fff;
}
html[data-theme="dark"] .category-tree-arrow,
html[data-theme="dark"] .category-tree-count { color: var(--qx-muted); }

/* A commenter's editor tags for the set, shown beside their name in a thread so
   it's clear when the person asking for a change is that category's editor. */
.commenter-tag {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.05em 0.45em;
    font-size: 0.7rem;
    font-weight: normal;
    letter-spacing: 0.02em;
    line-height: 1.5;
    vertical-align: 0.08em;
    color: #5b21b6;
    background: #efe6fb;
    border-radius: 9px;
}
html[data-theme="dark"] .commenter-tag { background: #2a2147; color: #c4b5fd; }

/* Marks a comment left on a packet rather than on a question, so the comment
   lists (which are otherwise all questions) don't read as if a packet name were
   an answer line. */
.packet-comment-badge {
    display: inline-block;
    margin-right: 0.35em;
    padding: 0.05em 0.45em;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
    vertical-align: 0.08em;
    color: #0b5c73;
    background: #dcf0f7;
    border-radius: 9px;
}
html[data-theme="dark"] .packet-comment-badge { background: #16333d; color: #8fd3e8; }

/* ---- Structured answer lines (sets with structured_answers on) ------------
   A primary answer plus rows of accepts and directed prompts. The rows are
   plain inputs posted as parallel lists, so the block degrades to something
   usable with no JavaScript — only the add/remove buttons and the live preview
   need it. */
.structured-answer {
    border: 1px solid var(--qx-border, #d5d5d5);
    border-radius: 4px;
    padding: 10px 12px 12px;
    margin-bottom: 12px;
    background: var(--qx-panel, #fbfbfc);
}
/* The label matches the "Tossup Text" label above it. It used to be bold, and
   the field inherited the weight, so an answer line read as bold end to end
   when only its required portion should. */
.structured-answer .sa-primary { display: block; font-weight: normal; margin-bottom: 10px; }
.structured-answer .sa-primary-input { width: 100%; margin-top: 4px; font-weight: normal; }
.structured-answer .sa-required { color: #a1490b; margin-left: 2px; }
html[data-theme="dark"] .structured-answer .sa-required { color: #f0a868; }
.structured-answer .sa-group {
    margin: 0 0 10px;
    padding-top: 8px;
    border-top: 1px solid var(--qx-border, #e6e6e8);
}
.structured-answer .sa-group-head {
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--qx-muted, #767676);
    margin-bottom: 5px;
}
/* The one-line explanation under a group head is prose, not a label: it drops
   the uppercasing so it doesn't compete with the head it sits under. */
.structured-answer .sa-group-head small {
    display: block;
    max-width: 46em;
    margin-top: 2px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: normal;
    font-size: 0.95em;
    line-height: 1.35;
}
/* The fields are rich-text editors (rich_editor.js), so the answer shows as it
   prints instead of as the markup that produces it. The wrapper takes the place
   of the input it replaced, so it inherits the row's flex sizing. */
.structured-answer .rich-editor-wrapper { margin-bottom: 0; margin-top: 4px; }
.structured-answer .sa-row .rich-editor-wrapper { flex: 2 1 0; min-width: 0; margin-top: 0; }
.structured-answer .rich-editor { min-height: 2.25em; }
.rich-editor-wrapper.rich-editor-compact .rich-editor {
    border-radius: 3px;
    padding: 0.35em 0.5em;
    box-shadow: none;
}
/* A contenteditable has no placeholder; enhance() copies the field's across
   and this shows it while the editor is empty. */
.rich-editor.rich-editor-empty:before {
    content: attr(data-placeholder);
    color: var(--qx-muted, #999);
    pointer-events: none;
}
.structured-answer .sa-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
}
.structured-answer .sa-row input,
.structured-answer .sa-row select { margin: 0; }
.structured-answer .sa-text { flex: 2 1 0; }
.structured-answer .sa-instruction { flex: 2 1 0; }
.structured-answer .sa-until { flex: 1 1 0; }
.structured-answer .sa-kind { flex: 0 0 auto; width: auto; }
.structured-answer .sa-remove {
    flex: 0 0 auto;
    border: none;
    background: none;
    color: var(--qx-muted, #767676);
    font-size: 1.2em;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.structured-answer .sa-remove:hover { color: #c00; }
.structured-answer .sa-add {
    border: none;
    background: none;
    color: var(--qx-link, #5b3a9e);
    cursor: pointer;
    padding: 0;
    font-size: 0.9em;
    line-height: 1.2;
}
.structured-answer .sa-add:hover,
.structured-answer .sa-add:focus { text-decoration: underline; }
/* The line these fields will print as — the one thing a moderator sees, so it
   stays visible while the fields are edited. */
.structured-answer .sa-preview {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--qx-border, #d5d5d5);
    font-size: 0.9em;
}
.structured-answer .sa-preview-label {
    flex: 0 0 auto;
    text-transform: uppercase;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--qx-muted, #767676);
}
/* A long answer line wraps instead of running off the panel — the preview is
   the whole point of the block, so it can't be the part that gets cut off. */
.structured-answer .sa-preview-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    /* The same serif the editors and the exported packets use — this is the
       printed line, so it should look like one rather than like code. */
    font-family: Georgia, 'Times New Roman', serif;
}
.sa-problems ul { margin: 0; padding-left: 20px; }

/* How a pasted prose answer line was read, on the upload preview. */
.sa-read {
    border-left: 3px solid var(--qx-border, #d5d5d5);
    padding: 4px 0 4px 10px;
    margin: 0 0 12px 12px;
    font-size: 0.9em;
}
.sa-read-warn { border-left-color: #d9a441; }
.sa-read-head {
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.04em;
    color: var(--qx-muted, #767676);
}
.sa-read-list, .sa-read-problems { margin: 2px 0 0; padding-left: 0; list-style: none; }
.sa-read-list li { margin: 0; }
.sa-read-kind {
    display: inline-block;
    min-width: 5.5em;
    color: var(--qx-muted, #767676);
    font-size: 0.9em;
}
.sa-read-asis { font-style: italic; }
.sa-read-problems { margin-top: 4px; color: #8a5b00; }
html[data-theme="dark"] .sa-read-problems { color: #f0a868; }
.sa-read-problems li { margin: 0; }

/* qbreader lookup, answered under the field the question is being written in.
   Not a popup: it has to survive the writer starting to rewrite the clue. */
.qbr-inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    margin: 4px 0 0; padding: 5px 10px; border-radius: 6px; font-size: 0.85rem;
    background: var(--qx-elevate, #f2f5f9); border: 1px solid var(--qx-border, #e0e4ea); }
.qbr-inline-term { font-weight: 600; }
.qbr-inline-counts { color: var(--qx-muted, #5c6270); }
.qbr-inline a { font-weight: 600; }
.qbr-inline-close { margin-left: auto; order: 99; border: none; background: none;
    color: var(--qx-muted, #8a8f9c); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 2px; }
.qbr-inline-close:hover { color: #c0392b; }

/* ---- Edit tossup / edit bonus: head, Edit|Read tabs, one editor card ----
   (_question_head.html, and the .qpane / .qedit-card markup in
   edit_tossup.html and edit_bonus.html.) */
.qhead-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
    font-size: .95rem; margin: 0 0 4px; }
.qhead-crumb-sep { color: var(--qx-muted); }
.qhead-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.app-content h1.qhead-title { margin: 0; font-size: 2.2rem; line-height: 1.15; }
.qhead-id { color: var(--qx-muted); font-size: .95rem; font-variant-numeric: tabular-nums; }
.qhead-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px;
    background: #efe6fb; color: #5b21b6; font-size: .85rem; font-weight: 500; white-space: nowrap; }
.qhead-pill-muted { background: #ececf2; color: #565b66; }
/* Previous/next in the packet ride at the end of the title row. */
.packet-nav.packet-nav-title { margin-left: auto; }

.qhead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.qtabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: #ececf2; }
.qtab { margin: 0; height: 36px; padding: 0 16px; border: none; border-radius: 8px; background: none;
    color: var(--qx-muted); font-family: var(--qx-sans); font-size: .95rem; line-height: 1; cursor: pointer; }
.qtab:hover, .qtab:focus { background: none; color: var(--qx-ink); outline: none; }
.qtab.is-active, .qtab.is-active:hover { background: var(--qx-card); color: var(--qx-ink);
    box-shadow: 0 1px 2px rgba(20, 20, 40, .12); }
body.app-authed a.qhead-btn, .qhead-btn { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box;
    height: 42px; padding: 0 16px; border: 1px solid var(--qx-border); border-radius: 10px;
    background: var(--qx-card); color: var(--qx-ink); font-size: .95rem; line-height: 1; white-space: nowrap; }
body.app-authed a.qhead-btn:hover { border-color: #cfc6e6; background: #faf8ff; color: var(--qx-ink); }
.qhead-btn-end { margin-left: auto; }
.qhead-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
    padding: 0 6px; border-radius: 11px; background: #ececf2; color: #565b66; font-size: .8rem; }
/* The Comments button is always in the row: it opens the column, and puts
   it away again. */
body.app-authed .qhead-actions .ec-open { display: inline-flex; }

.qpane[hidden], .qpane-note[hidden] { display: none; }
.qpane-note { margin: 0 0 8px; color: var(--qx-muted); font-size: .85rem; }
.qpane .panel.question .qmeta-lastmod { margin: 0; }
/* The Written / Edited / Proofread / Last modified lines read as one block
   with the Category and Character Count lines above them: same face, no
   paragraph gaps between them. */
.qpane .panel.question .anchor-region > p:last-child { margin-bottom: 0; }
.qpane .panel.question > p { margin: 0; font-family: inherit; }

.qedit-card { position: relative; margin: 0 0 16px; border: 1px solid var(--qx-border); border-radius: 14px;
    background: var(--qx-card); box-shadow: 0 1px 2px rgba(20, 20, 40, .04); }
.qedit-toolbar-slot { position: relative; border-bottom: 1px solid var(--qx-border); border-radius: 14px 14px 0 0; }
/* The card's toolbar: quiet buttons on the card, grouped by rules, with the
   field being edited and the Raw switch pushed to the right. */
.qedit-toolbar-slot .rich-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
    padding: 8px 12px; border: none; border-radius: 14px 14px 0 0; background: none; }
.qedit-toolbar-slot .rich-editor-toolbar a.rich-editor-btn { margin: 0; border-color: transparent;
    background: none; box-shadow: none; min-width: 2.3rem; height: 2.1rem; }
.qedit-toolbar-slot .rich-editor-toolbar a.rich-editor-btn:hover { background: #f1f1f5; border-color: transparent; }
.qedit-toolbar-slot .rich-editor-toolbar a.rich-editor-btn.active { background: #efe6fb; border-color: transparent;
    color: #5b21b6; box-shadow: none; }
.qedit-toolbar-slot .rich-editor-toolbar a.rich-editor-btn.rich-editor-plain { border-color: var(--qx-border); margin-left: auto; }
.rich-editor-sep { display: inline-block; width: 1px; height: 1.3rem; margin: 0 6px; vertical-align: middle;
    background: #d6d8de; }
/* Raw mode greys the formatting buttons, wherever the toolbar is living. */
.rich-editor-toolbar.rich-editor-toolbar-plain a.rich-editor-btn:not(.rich-editor-plain) { opacity: 0.4; pointer-events: none; }

/* The fields themselves: no boxes, just the question on the card. */
.qedit-card .rich-editor-wrapper { margin: 0; }
.qedit-card .rich-editor, .qedit-card .rich-editor:focus { border: none; border-radius: 0; box-shadow: none;
    background: none; padding: 14px 22px; font-size: 1.05rem; line-height: 1.6; }
.qedit-card .rich-editor.rich-editor-tall { min-height: 4.5em; }
.qedit-card .rich-editor.rich-editor-short { min-height: 0; }
.qedit-card .rich-editor.rich-editor-multiline { min-height: 12em; }
/* The field you are in gets a thin rule down its left edge -- with one
   toolbar for several fields, which one it acts on should be visible. */
.qedit-card.qedit-several .rich-editor-wrapper.is-active .rich-editor { box-shadow: inset 3px 0 0 #d9c9f5; }
.qedit-card.qedit-several .rich-editor-wrapper.is-active .rich-editor:focus { box-shadow: inset 3px 0 0 var(--qx-primary); }
.qedit-card textarea { margin: 0; border: none; border-radius: 0; box-shadow: none; padding: 14px 22px;
    font-family: monospace; font-size: .95rem; }
.qedit-answer { border-top: 1px solid var(--qx-border); }
.qedit-errors { padding: 0 22px; }
.qedit-card .structured-answer { padding: 10px 22px 12px; }
.qedit-card .structured-answer .rich-editor { padding: 6px 10px; font-size: 1.05rem; }
.qedit-card .structured-answer .sa-primary .sa-required { display: none; }
.qedit-foot { padding: 8px 22px; border-top: 1px solid var(--qx-border); color: var(--qx-muted); font-size: .85rem; }
.qedit-foot strong { color: var(--qx-ink); }

/* Bonus parts in the card: a narrow gutter with the value and difficulty,
   the part and its answer line beside it. */
.qedit-card .bonus-part { display: flex; align-items: stretch; margin: 0; border-top: 1px solid var(--qx-border); }
.qedit-card .bonus-part-dif { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 16px 0 0 12px; }
.qedit-card .bonus-part-value { font-family: var(--qx-serif); font-size: 1.05rem; color: var(--qx-muted); }
.qedit-card .bonus-part-dif select { width: 52px; height: 30px; margin: 0; padding: 0 4px; font-size: .85rem;
    text-align: center; }
.qedit-card .bonus-part-main { flex: 1 1 auto; min-width: 0; }
.qedit-card .bonus-part-main .rich-editor { padding-left: 10px; }

/* The duplicate-answer notice: a header and the list, nothing else. */
.app-content .alert-box.dup-warning { position: relative; padding: 10px 40px 10px 14px; margin-bottom: 12px; }
.dup-warning-head { display: block; margin-bottom: 2px; }
.dup-warning-list { margin: 0 0 0 1.1rem; }
.dup-warning-list li { margin: 0; line-height: 1.5; }
body.app-authed .dup-warning-list a, body.app-authed .dup-warning-list a:visited { color: inherit; text-decoration: underline; }
body.app-authed .dup-warning a.dup-warning-close { position: absolute; top: 6px; right: 12px; color: inherit;
    font-size: 1.3rem; line-height: 1; text-decoration: none; opacity: .8; }
body.app-authed .dup-warning a.dup-warning-close:hover { opacity: 1; }

html[data-theme="dark"] .qhead-pill { background: #2e2447; color: #cbb5f5; }
html[data-theme="dark"] .qhead-pill-muted,
html[data-theme="dark"] .qtabs,
html[data-theme="dark"] .qhead-count { background: var(--qx-elevate); color: var(--qx-muted); }
html[data-theme="dark"] .qtab.is-active { background: var(--qx-hover); color: var(--qx-ink); }
html[data-theme="dark"] body.app-authed a.qhead-btn:hover { background: var(--qx-hover); border-color: #4a4f5c; }
html[data-theme="dark"] .qedit-toolbar-slot .rich-editor-toolbar { background: none; }
html[data-theme="dark"] .qedit-toolbar-slot .rich-editor-toolbar a.rich-editor-btn { background: none; border-color: transparent; }
html[data-theme="dark"] .qedit-toolbar-slot .rich-editor-toolbar a.rich-editor-btn:hover { background: var(--qx-hover); }
html[data-theme="dark"] .qedit-toolbar-slot .rich-editor-toolbar a.rich-editor-btn.active { background: #2e2447; color: #cbb5f5; }
html[data-theme="dark"] .qedit-toolbar-slot .rich-editor-toolbar a.rich-editor-btn.rich-editor-plain { border-color: var(--qx-border); }
html[data-theme="dark"] .qedit-card .rich-editor { background: none; }
html[data-theme="dark"] .qedit-card textarea { background: none; color: var(--qx-ink); }
html[data-theme="dark"] .rich-editor-sep { background: var(--qx-border); }
/* A bonus part is a sentence or two; it needn't open as tall as a stem. */
.qedit-card .bonus-part .rich-editor.rich-editor-tall { min-height: 2.6em; }
html[data-theme="dark"] .qtabs .qtab { background: none; color: var(--qx-muted); }
html[data-theme="dark"] .qtabs .qtab.is-active { background: var(--qx-hover); color: var(--qx-ink); }
html[data-theme="dark"] body.app-authed a.qhead-btn { color: var(--qx-ink); }
/* The power run of a tossup stem, bolded in the editor as it will print.
   Display only: rich_editor.js adds these spans and the markup conversion
   ignores them, since power is applied from the (*) mark, not from bold. */
.rich-editor .q-power { font-weight: bold; }
/* A tossup with both a superpower and a power: the superpower stays bold and
   the power a step lighter, so the (+) boundary shows at a glance. Question
   text is Georgia, which has no weights between regular and bold, so the
   semi-bold is regular weight with a hairline stroke. Exports print both as
   bold. */
.rich-editor .q-power.q-power-run, strong.q-power-run {
    font-weight: normal; -webkit-text-stroke: 0.45px currentColor; }
.rich-editor .q-power.q-superpower, strong.q-superpower { font-weight: bold; }
/* History sits in the tab row but is its own page, so it is a link. */
body.app-authed a.qtab-link { display: inline-flex; align-items: center; color: var(--qx-muted); text-decoration: none; }
body.app-authed a.qtab-link:hover { color: var(--qx-ink); }
/* Save, under the question card on the edit pages. */
.qedit-save { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: -4px 0 16px; }
.qedit-save .button { margin: 0; }

/* ---- Byline + action row under the question (_question_meta.html) ---- */
.qmeta-card { margin: 0 0 16px; border: 1px solid var(--qx-border); border-radius: 14px;
    background: var(--qx-card); box-shadow: 0 1px 2px rgba(20, 20, 40, .04); }
.qmeta-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 14px 22px; }
.qmeta-word { color: var(--qx-muted); font-size: .95rem; }
/* The category, author and credit fields, dressed as the words of the line:
   no box until you point at one, and then only a faint one. */
/* input[type] as well: Foundation's own text-input rule is that specific. */
.qmeta-inline select, .qmeta-inline input, .qmeta-inline input[type="text"] {
    height: 32px; margin: 0; padding: 0 8px; border: 1px solid transparent; border-radius: 7px;
    background-color: transparent; box-shadow: none; color: var(--qx-ink); font-size: .95rem;
    font-family: var(--qx-sans); cursor: pointer; }
.qmeta-inline select { padding-right: 20px; background-position: right 4px center; }
.qmeta-inline select:hover, .qmeta-inline input:hover, .qmeta-inline input[type="text"]:hover { border-color: var(--qx-border); background-color: #fafafc; }
.qmeta-inline select:focus, .qmeta-inline input:focus, .qmeta-inline input[type="text"]:focus { border-color: #cfc6e6; background-color: var(--qx-card);
    outline: none; box-shadow: none; }
.qmeta-cat select { font-weight: 600; }
.qmeta-credit input { width: 9em; cursor: text; }
/* The credited name, standing in for the author dropdown. */
.qmeta-author { display: inline-flex; align-items: center; }
.qmeta-author .qmeta-credit { display: inline-flex; align-items: center; gap: 2px; }
.qmeta-author .qmeta-credit input { width: 12em; font-weight: 500; }
.qmeta-credit-clear { margin: 0; padding: 0 6px; border: none; background: none; color: var(--qx-muted);
    font-size: 1.1rem; line-height: 1; cursor: pointer; }
.qmeta-credit-clear:hover, .qmeta-credit-clear:focus { background: none; color: #c0392b; }
.qmeta-credit input::placeholder { color: var(--qx-muted); }
body.app-authed a.qmeta-packet-link { color: var(--qx-ink); font-size: .95rem; padding: 0 4px; }
body.app-authed a.qmeta-packet-link:hover { color: var(--qx-primary); }
.qmeta-errors { padding: 0 22px 10px; }
.qmeta-measure { position: absolute; visibility: hidden; white-space: pre; font-family: var(--qx-sans);
    font-size: .95rem; font-weight: 600; padding: 0 8px; }

.qmeta-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px;
    border-top: 1px solid var(--qx-border); border-radius: 0 0 14px 14px; background: #fafafc; }
body.app-authed a.qmeta-btn, .qmeta-btn { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box;
    height: 40px; margin: 0; padding: 0 12px; border: 1px solid var(--qx-border); border-radius: 9px;
    background: var(--qx-card); color: var(--qx-ink); font-family: var(--qx-sans); font-size: .95rem; line-height: 1;
    white-space: nowrap; cursor: pointer; }
/* Boxed, so the actions read as buttons rather than more of the tags above them. */
body.app-authed a.qmeta-btn:hover, .qmeta-btn:hover, .qmeta-btn:focus { background: #f0f0f5; border-color: #c9cad3;
    color: var(--qx-ink); outline: none; }
.qmeta-status-summary { color: var(--qx-muted); font-size: .9rem; }
.qmenu-caret { font-size: .7rem; color: var(--qx-muted); }

.qmenu { position: relative; }
.qmenu-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 220px; padding: 6px;
    border: 1px solid var(--qx-border); border-radius: 12px; background: var(--qx-card);
    box-shadow: 0 10px 30px rgba(20, 20, 40, .14); }
.qmenu-panel[hidden] { display: none; }
body.app-authed a.qmenu-item, .qmenu-check { display: flex; align-items: center; gap: 10px; margin: 0;
    padding: 9px 12px; border-radius: 8px; color: var(--qx-ink); font-size: .95rem; font-weight: normal;
    cursor: pointer; white-space: nowrap; }
body.app-authed a.qmenu-item:hover, .qmenu-check:hover { background: #f3f3f7; }
.qmenu-check input { margin: 0; }
body.app-authed a.qmenu-danger { color: #b3261e; }
.qmenu-sep { margin: 6px 4px; border: none; border-top: 1px solid var(--qx-border); }
.qmenu-empty { display: block; padding: 9px 12px; color: var(--qx-muted); font-size: .9rem; white-space: normal; }
/* A long list of sets scrolls rather than running off the page. */
.qmove-panel { max-height: 320px; overflow-y: auto; }

html[data-theme="dark"] .qmeta-bar { background: var(--qx-elevate); }
html[data-theme="dark"] .qmeta-inline select:hover, html[data-theme="dark"] .qmeta-inline input:hover,
html[data-theme="dark"] body.app-authed a.qmeta-btn:hover, html[data-theme="dark"] .qmeta-btn:hover,
html[data-theme="dark"] body.app-authed a.qmenu-item:hover, html[data-theme="dark"] .qmenu-check:hover { background: var(--qx-hover); }
html[data-theme="dark"] .qmeta-inline select, html[data-theme="dark"] .qmeta-inline input { color: var(--qx-ink); background-color: transparent; }
html[data-theme="dark"] body.app-authed a.qmeta-btn, html[data-theme="dark"] .qmeta-btn { color: var(--qx-ink); }
html[data-theme="dark"] body.app-authed a.qmeta-btn:hover, html[data-theme="dark"] .qmeta-btn:hover,
html[data-theme="dark"] .qmeta-btn:focus { border-color: var(--qx-muted); }
html[data-theme="dark"] body.app-authed a.qmenu-danger { color: #f08c8c; }
/* The set page's Submit Changes, set off from the packet-credit buttons above it. */
.set-save { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--qx-border); }
.set-save .button { margin: 0; }