/* Quests hub (/quests). */

/* ── Empty-state "create your first quest" screen ─────────────────────
   `as-*` are the shared brutalist primitives (see variables.css for the
   as-yellow/as-black/as-grey colors). Each page loads only its own
   pages/<page>.css, so these are duplicated here like account.css/dashboard.css do. */

.as-page {
    width: 100%;
    box-sizing: border-box;
    padding: 24px 5%;
    text-align: left;
}

.as-page * {
    box-sizing: border-box;
}

.as-box {
    border: 2px solid var(--as-black);
    background-color: #fff;
}

.as-box--accent {
    box-shadow: 6px 6px 0 var(--as-cyan);
    margin-bottom: 6px;
}

.as-box-body {
    padding: 18px;
}

.as-btn {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 12px 20px;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 6px;
}

.as-btn--solid {
    background-color: var(--as-black);
    color: #fff;
    border: 2px solid var(--as-black);
}

.as-btn--solid:hover:not(:disabled) {
    background-color: var(--as-cyan);
    color: var(--as-black);
    border-color: transparent;
}

.pq-page-bg {
    position: fixed;
    inset: 0;
    background-color: #f4f4f4;
    z-index: -1;
}

.pq-empty-page {
    max-width: 760px;
    width: 100%;
    margin: auto;
    /* padding-top: 56px; */
    /* padding-bottom: 56px; */
}

.pq-kicker {
    display: flex;
    align-self: flex-start;
    gap: 8px;
    font-family: monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--as-grey);
    margin-bottom: 16px;
}

.pq-kicker-dot {
    width: 9px;
    height: 9px;
    background-color: var(--as-yellow);
    border: 1px solid var(--as-black);
    display: inline-block;
}

.pq-create-window {
    margin-bottom: 28px;
}

.pq-create-body {
    padding: 28px 32px;
}

.pq-headline {
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--as-black);
    margin: 0 0 14px;
}

.pq-headline-hl {
    color: var(--as-cyan);
    padding: 0;
    font-size: 34px;
    font-weight: 800;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.pq-sub {
    font-family: 'Roboto', sans-serif;
    max-width: 46ch;
    margin: 0 0 22px;
}

.pq-row {
    align-items: flex-end;
    gap: 16px;
    flex-wrap: nowrap;
}

.pq-field {
    position: relative;
    flex: 1 1 260px;
    min-width: 200px;
    padding-top: 10px;
}

.pq-field-label {
    position: absolute;
    top: 3px;
    left: 14px;
    background-color: var(--as-cyan);
    padding: 4px 7px;
    display: inline-flex;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--as-black);
    z-index: 1;
    line-height: 1;
}

.pq-input, .pq-select {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border: 2px solid var(--as-black);
    border-radius: 0;
    padding: 14px 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: var(--as-black);
}

.pq-input::placeholder {
    color: #999;
}

.pq-input:focus, .pq-select:focus {
    outline: none;
    border-color: var(--as-black);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}

.pq-or {
    flex: 0 0 auto;
    font-style: italic;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 11px;
    padding-top: 9px;
}

.pq-field-theme {
    width: 100%;
}
.pq-field-theme .pq-input {
    padding: 20px 16px;
    font-size: 16px;
}

.pq-theme-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.pq-theme-row .pq-input {
    flex: 1 1 auto;
    min-width: 0;
}
.pq-photo-btn {
    flex: 0 0 56px;
    min-width: 0;
    max-width: 56px;
    padding: 0;
    border: 2px solid var(--as-black);
    background: var(--as-white, #fff);
    color: var(--as-black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s;
}
.pq-photo-btn:hover {
    background: var(--as-yellow);
}
.pq-photo-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
/* ---- Photo-to-quest progress steps (reading photo, matching database) ---- */
.pq-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}
.pq-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: var(--as-black);
}
.pq-step-icon {
    box-sizing: border-box;
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border: 2px solid var(--as-black);
    position: relative;
}
.pq-step-icon--spin {
    background: var(--as-cyan);
    animation: quest-spinner-flip 1.2s infinite ease-in-out;
}
.pq-step-icon--done {
    background: transparent;
    border-color: transparent;
    animation: none;
    transform: none;
}
.pq-step-icon--done::after {
    content: "";
    position: absolute;
    left: 3px;
    top: -1px;
    width: 4px;
    height: 8px;
    border: solid var(--as-cyan);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pq-step-icon--error {
    background: transparent;
    border-color: transparent;
    animation: none;
}
.pq-step-icon--error::after {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    width: 12px;
    height: 12px;
    background:
        linear-gradient(45deg, transparent 42%, var(--color-primary) 42%, var(--color-primary) 58%, transparent 58%),
        linear-gradient(-45deg, transparent 42%, var(--color-primary) 42%, var(--color-primary) 58%, transparent 58%);
}
.pq-step-text {
    line-height: 1.3;
}
.pq-step-words {
    font-style: italic;
}
/* ---- Post-creation reveal screen (word-by-word, difficulty split, social proof) ---- */
.qr-panel {
    max-width: 520px;
}
/* Filled chip, not just colored text — scoped here rather than changing the
   shared .brutal-kicker--yellow (used elsewhere as plain colored text, e.g.
   the daily-limit modal). */
.qr-kicker {
    display: inline-block;
    background: var(--as-yellow);
    color: var(--as-black);
    border: 1px solid var(--as-black);
    padding: 2px 8px;
}
.qr-word-list {
    max-height: 320px;
    overflow-y: auto;
    margin: 4px 0 20px 0;
    padding: 8px;
    background: #f2f2f2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.qr-word-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    opacity: 0;
    animation: qr-fade-in 0.25s ease forwards;
}
@keyframes qr-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.qr-word-label {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: var(--as-black);
}
.qr-chip {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid var(--as-black);
}
.qr-chip--at-level {
    background: var(--as-cyan);
}
.qr-chip--stretch {
    background: var(--as-yellow);
}
.qr-chip--photo {
    background: var(--as-green);
}
.qr-chip--database {
    background: var(--as-yellow);
}
.qr-word-reason {
    flex-basis: 100%;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: var(--as-grey);
}
.qr-summary {
    margin-bottom: 20px;
}
.qr-summary-line {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--as-cyan);
    margin: 0 0 6px 0;
}
.lp-field {
    position: relative;
    margin-top: 14px;
    margin-bottom: 20px;
}

/* The cyan label floats like a fieldset legend, straddling the top border of
   whatever comes right after it (the select, or the reason-options grid) —
   centered on that border line, not just placed above it. Depends on
   .lp-field having no padding-top of its own, so top:0 here lines up exactly
   with that next element's border-box top. */
.lp-field .pq-field-label {
    top: 0;
    transform: translateY(-50%);
}

.lp-highlight {
    background-color: var(--as-yellow);
    padding: 1px 5px;
}

.lp-reason-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 0;
}
.lp-reason-option {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid var(--as-black);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--as-black);
    cursor: pointer;
}
.lp-reason-option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    accent-color: var(--as-black);
}

#lp-status {
    margin-top: 0;
    min-height: 0;
}

#learner-profile-modal .brutal-delete-actions {
    margin-top: 8px;
}

.pq-inspiration {
    margin-top: 18px;
}
.pq-inspiration-label {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--as-grey);
    margin-bottom: 10px;
}
.pq-inspiration-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pq-tag {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--as-black);
    background: #fff;
    border: 2px solid var(--as-black);
    border-radius: 0;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color .1s ease, color .1s ease;
    /* A long quest name wraps inside the box instead of running past it (the site's button rule is nowrap). */
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
}
.pq-tag:hover {
    background: var(--as-cyan);
}
.pq-tag-selected {
    background: var(--as-black);
    color: #fff;
}

.pq-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 3dvh;
}

.pq-create-btn {
    border-radius: 0;
    font-weight: 600;
}

.pq-footer-meta {
    display: flex;
    gap: 18px;
    font-family: 'Roboto', monospace;
    font-size: 12px;
    color: var(--as-grey);
    flex-wrap: wrap;
}

.pq-footer-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
}

.pq-meta-icon {
    width: 15px;
    height: 15px;
    display: block;
}

.pq-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.pq-info-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    text-decoration: none;
    color: inherit;
}

.pq-info-card:hover {
    background-color: var(--as-cyan-10);
}

.pq-info-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background-color: var(--as-black);
}

.pq-info-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pq-info-text strong {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--as-black);
}

.pq-info-text span {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: var(--as-grey);
}

@media (max-width: 640px) {
    .pq-row {
        flex-wrap: wrap;
    }
    .pq-or {
        padding-bottom: 0;
    }
    .pq-headline {
        font-size: 28px;
    }
    .pq-info-grid a[href="/grammar"] {
        display: none;
    }
    .pq-field-theme .pq-input {
        padding: 12px;
    }
    .pq-input:focus, .pq-select:focus {
        border-color: var(--as-cyan);
    }
}

.quest-new-box {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 24px;
}
.quest-new-box h3 { margin: 0 0 4px; }
.quest-sub {
    color: #666;
    margin: 0 0 14px;
    font-size: 0.92rem;
    align-self: flex-start;
}
.quest-new-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
/* Matches the site's brutalist form-control look used elsewhere (e.g.
   .words-admin-field select in edit-words.css): solid black border, square
   corners, white fill — not the browser's default grey-bordered rounded
   select, which clashed with the black-bordered "+ New quest" button next
   to it in the practice toolbar. */
.quest-input, .quest-select {
    border: 2px solid var(--as-black);
    border-radius: 0;
    background-color: #fff;
    padding: 6px 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--as-black);
}
.quest-input { flex: 1 1 220px; min-width: 180px; }
/* The "Switch" dropdown's options are other active quests' titles, which can
   run long the same way the topic label can — cap it so it doesn't stretch
   the whole topbar. text-overflow on a <select> only clips its closed-state
   label in Chromium-based browsers, but that degrades harmlessly elsewhere. */
#quest-switch {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* .quest-or { color: #999; font-size: 0.85rem; } */
.quest-status {
    font-family: 'Roboto', sans-serif;
    margin-top: 10px;
    min-height: 1.2em;
    color: var(--as-cyan);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.quest-status-error {
    color: var(--color-primary);
}
.quest-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background: var(--as-cyan);
    border: 2px solid var(--as-black);
    animation: quest-spinner-flip 1.2s infinite ease-in-out;
}
@keyframes quest-spinner-flip {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
}
.quest-cap-note { margin-top: 8px; font-size: 0.82rem; color: #888; }

/* Practice hub topbar (switch quest + new quest). */
.practice-topbar {
    display: flex;
    /* Wrap the whole left/right half onto its own row rather than letting
       either half get squeezed past its content's min width and clipped
       off the right edge — this is the width range between the ≤600px
       stacked-mobile layout below and a comfortably wide desktop window. */
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    /* Cancels .lp-wrap's padding-top:20px (lesson-player.css) so this bar's
       background sits flush against the fixed nav bar instead of leaving a
       visible gap — that padding is meant for ordinary page content below
       the nav, not for a bar meant to read as an extension of it. */
    margin: -20px 0 32px 0;
    padding: 12px 20px;
    border-bottom: 2px solid var(--as-black);
    width: 100%;
    box-sizing: border-box;
    background-color: var(--as-cyan-10);
}
.practice-topbar-left, .practice-topbar-right {
    margin: 0 2dvw;
    display: flex;
    align-items: center;
}
.practice-topbar-right {
    border-left: 2px solid var(--as-black);
    padding-left: 24px;
}
.practice-progress-groups {
    display: flex;
    gap: 28px;
    flex-wrap: nowrap;
}
.practice-progress-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 130px;
}
.practice-progress-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.practice-progress-group .lp-qbar {
    width: 100%;
    max-width: none;
}
.practice-progress-group .lp-qbar-mastery .lp-qbar-fill {
    background: var(--as-yellow);
}
.practice-topbar-info {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap; min-width: 0;
}
.practice-topbar-info .lp-statusbar-cell {
    padding: 0; border: 0 !important; flex: 0 0 auto; min-width: 0;
}
/* A theme/photo-quest title can run long (an AI-written summary, or whatever
   a learner typed) — clip it with an ellipsis rather than pushing the rest
   of the topbar off-screen or wrapping mid-word. Full text is still on the
   `title` attribute for hover. */
.lp-statusbar-value--topic {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}
.practice-controls { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin-left: auto; }

/* "N more words waiting in this quest" — live, in-session banner. Empty
   (and takes no space) once every word in the quest has been introduced. */
.lp-mastery-banner:empty { display: none; }
.lp-mastery-banner-text {
    margin: 0 0 20px 0;
    padding: 10px 16px;
    border: 2px solid var(--as-black);
    background-color: var(--as-cyan-10);
    font-weight: 700;
}
.practice-controls #new-quest-btn {
    font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    background: var(--as-black); color: #fff; border: 2px solid var(--as-black);
    border-radius: 0; padding: 12px 20px; cursor: pointer;
    white-space: nowrap;
}
.practice-controls #new-quest-btn:hover:not(:disabled) {
    background: var(--as-cyan); border-color: transparent; color: var(--as-black);
}
.practice-switch-label {
    font-size: 0.85rem; color: #666; display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.practice-sub-link {
    font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    background: var(--as-black); color: #fff; border: 2px solid var(--as-black);
    border-radius: 0; padding: 12px 20px; cursor: pointer;
    display: inline-block; text-decoration: none;
}
.practice-sub-link:hover {
    background: var(--as-cyan); border-color: transparent; color: var(--as-black);
}
/* Fade the disabled button with colour, not opacity: opacity would also dim
   the quest-limit tooltip drawn as this button's ::before/::after. */
#new-quest-btn[disabled] {
    cursor: not-allowed;
    background: #8a8a8a; border-color: #8a8a8a; color: #fff;
}
/* Quest-limit tooltip: solid black bubble, white text, sitting above the topbar. */
#new-quest-btn[data-cooltipz-dir] {
    --cooltipz-bg-color: var(--as-black, #111111);
    --cooltipz-text-color: #ffffff;
    --cooltipz-border-color: var(--as-black, #111111);
}
#new-quest-btn[data-cooltipz-dir]::after,
#new-quest-btn[data-cooltipz-dir]::before {
    z-index: 1000;
}

.quest-section { margin: 26px 0; }
.quest-section h3 { margin: 0 0 12px; }
.quest-empty { color: #888; font-style: italic; }

.quest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.quest-card {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.quest-card-done { opacity: 0.85; }
.quest-card-title { font-weight: 600; font-size: 1.05rem; }
.quest-card-meta {
    color: #888;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.quest-bar {
    height: 8px;
    background: #eee;
    border-radius: 6px;
    overflow: hidden;
}
.quest-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4a90d9, #2ecc8f);
    transition: width 0.4s ease;
}
.quest-card-progress { font-size: 0.82rem; color: #555; min-height: 1em; }
.quest-play-btn { align-self: flex-start; margin-top: 4px; }

.quest-badge-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.quest-badge {
    text-align: center;
    width: 90px;
}
.quest-badge img { display: block; margin: 0 auto; }
.quest-badge-name { font-size: 0.78rem; color: #555; margin-top: 4px; }

/* Challenges */
.challenge-card { border-color: #d9c9e8; }
.challenge-desc {
    font-size: 0.88rem;
    color: #555;
    font-family: 'Roboto', sans-serif;
}
.challenge-stages { margin-top: 16px; }
.challenge-real-world h4 { margin: 0 0 6px; font-size: 0.9rem; }
.challenge-html { font-size: 0.9rem; color: #444; margin-bottom: 8px; }
.challenge-flag-done { color: #1a9; font-weight: 600; font-size: 0.9rem; margin-top: 6px; }
.challenge-locked-note {
    font-size: 10px;
    color: #999;
    font-family: monospace;
    margin-top: 8px;
}

/* ── Quests page (/quests) — brutalist redesign ──────────────────────── */

.qp-page {
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
}

.qp-page > * {
    max-width: 1180px;
}

/* Breadcrumb bar (trending-quests.ejs — the entry point varies, so the
   handler picks which chain to render depending on the referer). */
.tq-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.tq-breadcrumb-link { font-size: inherit; color: var(--as-grey); text-decoration: none; }
.tq-breadcrumb-link:hover { color: var(--as-black); text-decoration: underline; }
.tq-breadcrumb-sep { font-size: inherit; color: var(--as-grey); }
.tq-breadcrumb-current { font-size: inherit; color: var(--as-black); }

.qp-headline {
    align-self: flex-start;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--as-black);
    margin: 6px 0 14px;
    text-transform: uppercase;
}

.qp-headline-hl {
    font-size: inherit;
    font-style: italic;
}

.qp-sub {
    max-width: 60ch;
    font-size: 15px;
    font-weight: 500;
}

.qp-section { width: 100%; max-width: none; margin: 40px 0; }

.qp-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 2px solid var(--as-black);
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.qp-section-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    margin: 0 0 2px;
    color: var(--as-black);
}

.qp-section-sub {
    font-size: 11px;
    color: var(--as-grey);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0;
}

.qp-new-btn {
    font-size: 11px;
    border-radius: 0;
    text-decoration: none;
    display: inline-block;
}
/* Disabled "create new" (at the quest cap): flat grey, no border or hover. */
.qp-new-btn:disabled {
    background-color: #cccccc;
    color: #666;
    border-color: transparent;
    cursor: default;
}

/* Create-new + "add words from image" sit together on the right of the head. */
.qp-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* "Upload some words?" — small underlined link (matches the login page's
   forgot-password link) shown next to the "no words" quest-creation message. */
.pq-upload-words-link {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--as-grey);
    text-decoration: underline;
    text-decoration-color: var(--as-yellow);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.pq-upload-words-link:hover {
    color: var(--as-yellow);
}

.qp-grid {
    width: 100%;
    justify-content: start;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px 24px;
}

.qp-quest-card {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid var(--as-black);
    border-radius: 0;
    box-shadow: 6px 6px 0 var(--as-cyan);
    padding: 20px;
    margin: 0 0 6px;
    gap: 0;
}

/* Completed quests: gold + celebratory, grouped in their own subsection so it
   reads as "done" and clearly separate from the cap-counting active quests. */
.qp-quest-card.quest-card-done {
    box-shadow: 6px 6px 0 var(--as-gold);
    background: #fffdf3;
    opacity: 1;
}
.qp-quest-card.quest-card-done .qp-quest-pct { color: var(--as-gold) !important; }
.qp-quest-card.quest-card-done .qp-bar-fill { background: var(--as-gold); }
.qp-quest-card.quest-card-done .qp-practice-btn { background: var(--as-gold); }
.qp-done-check { color: var(--as-gold); font-weight: 900; }

.qp-subsection { width: 100%; margin-top: 34px; }
.qp-subsection-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px dashed var(--as-gold);
}
.qp-subsection-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    margin: 0;
    color: var(--as-black);
}
.qp-subsection-note {
    font-size: 11px;
    color: var(--as-grey);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0;
}

.qp-quest-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

.qp-quest-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--as-black);
}

.qp-quest-delete {
    flex: 0 0 auto;
    display: flex;
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    color: var(--as-black);
}

.qp-quest-delete:hover {
    color: var(--as-yellow);
}

.qp-quest-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1dvh;
    margin-top: 2dvh;
}

.qp-quest-progress-label > span {
    font-family: monospace !important;
    display: flex;
    justify-content: space-between;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--as-black);
}

.qp-quest-pct {
    color: var(--as-cyan) !important;
}

.qp-bar {
    height: 8px;
    background: #e5e5e5;
    border: 2px solid var(--as-black);
    border-radius: 0;
    overflow: hidden;
}

.qp-bar-fill {
    background: var(--as-cyan);
    border-radius: 0;
}

/* Progress-bar hover: per-skill breakdown popover. The wrapper keeps the bar's
   place in the card flow while giving the (clipped-free) tooltip a positioning
   context — the bar itself has overflow:hidden, so the tip can't live inside it. */
.qp-bar-wrap {
    position: relative;
    outline: none;
}
.qp-bar-wrap:focus-visible .qp-bar {
    box-shadow: 0 0 0 2px var(--as-cyan);
}

.qp-skill-tip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 12px);
    z-index: 60;
    min-width: 210px;
    background: #fff;
    border: 2px solid var(--as-black);
    box-shadow: 5px 5px 0 var(--as-black);
    padding: 12px 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
    pointer-events: none;
}
/* Little downward notch pointing at the bar. */
.qp-skill-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 22px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-right: 2px solid var(--as-black);
    border-bottom: 2px solid var(--as-black);
    transform: translateY(-60%) rotate(45deg);
}
.qp-bar-wrap:hover .qp-skill-tip,
.qp-bar-wrap:focus .qp-skill-tip,
.qp-bar-wrap:focus-within .qp-skill-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.qp-skill-tip-title {
    font-family: 'Roboto Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--as-grey);
    margin-bottom: 9px;
}

.qp-skill-tip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qp-skill-tip-row {
    display: grid;
    grid-template-columns: auto minmax(44px, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.qp-skill-tip-name {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--as-black);
}

.qp-skill-tip-track {
    position: relative;
    height: 7px;
    background: #e5e5e5;
    border: 1.5px solid var(--as-black);
    overflow: hidden;
}

.qp-skill-tip-bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--as-cyan);
}

.qp-skill-tip-pct {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--as-black);
    text-align: right;
    min-width: 30px;
}

.qp-quest-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.qp-practice-btn {
    font-family: 'Roboto', sans-serif;
    background: var(--as-cyan);
    color: var(--as-black);
    border: 2px solid var(--as-black);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .03em;
    text-decoration: none;
    padding: 10px 20px;
}

.qp-practice-btn:hover { background: var(--as-black); color: #fff; }

.qp-challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 32px;
}

.qp-challenge-card {
    display: flex;
    gap: 32px;
    align-items: stretch;
    border: 3px solid var(--as-black);
    box-shadow: 6px 6px 0 var(--as-yellow);
    margin-bottom: 6px;
    padding: 32px;
    background: #fff;
}

.qp-challenge-card.qp-challenge-done { box-shadow: 6px 6px 0 var(--as-cyan); }

.qp-challenge-body { flex: 1 1 auto; min-width: 0; }

.qp-completed-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.qp-completed-tag {
    display: inline-block;
    background: var(--as-yellow);
    color: var(--as-black);
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 4px;
}

.qp-completed-tag span { color: var(--as-black); font-size: inherit; font-family: inherit; }

.qp-challenge-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--as-black);
    margin-bottom: 8px;
}

.qp-challenge-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.625;
    margin-bottom: 24px;
}

.qp-mastery-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.qp-mastery-row > span {
    font-family: 'Roboto Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.qp-mastery-label { color: var(--as-black) !important; }
.qp-mastery-pct { color: var(--as-yellow) !important; }

.qp-mastery-bar { margin-bottom: 24px; }
.qp-mastery-bar .qp-bar-fill { background: var(--as-yellow); }

.qp-btn-row {
    display: flex;
    gap: 12px;
}

.qp-accept-btn, .qp-review-btn, .qp-test-btn {
    display: inline-block;
    text-decoration: none;
    border-radius: 0;
    text-align: center;
    flex: 1 1 0;
    padding-top: 16px;
    padding-bottom: 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    border: 2px solid var(--as-black);
    cursor: pointer;
}

.qp-accept-btn {
    background: var(--as-black);
    color: #fff;
}

.qp-accept-btn:hover {
    background: var(--as-yellow);
    color: var(--as-black);
}

.qp-review-btn {
    width: 100%;
    background: var(--as-cyan);
    color: var(--as-black);
}

.qp-review-btn:hover {
    background: var(--as-black);
    color: var(--as-white);
}

.qp-test-btn {
    background: #ddd;
    color: #888;
    border-color: #ddd;
    pointer-events: none;
    cursor: not-allowed;
}

.qp-challenge-card[data-unlocked="1"] .qp-test-btn {
    background: #2c6bd9;
    color: #fff;
    border-color: var(--as-black);
    pointer-events: auto;
    cursor: pointer;
}

.qp-challenge-card[data-unlocked="1"] .qp-test-btn:hover { background: var(--as-black); }

.qp-badge-slot {
    flex: 0 0 128px;
    border: 2px solid var(--as-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
}

.qp-badge-locked { background: #f8f8f8; }
.qp-badge-earned { background: var(--as-cyan-10); }

.qp-badge-lock-icon,
.qp-badge-earned-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.qp-badge-lock-icon {
    background: #e5e5e5;
    border: 2px dashed var(--as-black);
    color: var(--as-black);
    opacity: 0.3;
}

.qp-badge-earned-icon {
    width: 64px;
    height: 64px;
    background: var(--as-cyan);
    border: 2px solid var(--as-black);
    box-shadow: 4px 4px 0 var(--as-black);
    color: var(--as-black);
}

.qp-badge-slot img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid var(--as-black);
    box-shadow: 4px 4px 0 var(--as-black);
}

.qp-badge-caption {
    font-family: 'Roboto', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--as-grey);
}

.qp-badge-earned .qp-badge-caption { color: var(--as-black); font-style: normal; }

@media (max-width: 720px) {
    .qp-headline { font-size: 34px; }
    .qp-challenge-card { flex-direction: column; }
    .qp-badge-slot { flex: 0 0 auto; flex-direction: row; }
}

/* Between the ≤600px mobile layout (which drops the whole topic/controls row)
   and the point where the desktop single-row layout comfortably fits, the
   default flex-wrap behavior on .practice-topbar drops .practice-topbar-right
   onto its own line while its border-left/margin (meant for a side-by-side
   divider) come along for the ride, rendering as a short floating vertical
   tick above "Practice time" instead of a real divider. Force a deliberate
   stacked layout here instead of leaving it to organic wrapping. */
@media (max-width: 1100px) and (min-width: 601px) {
    .practice-topbar {
        flex-direction: column;
        align-items: stretch;
    }
    .practice-topbar-left,
    .practice-topbar-right {
        margin: 0;
        width: 100%;
    }
    .practice-topbar-right {
        border-left: 0;
        border-top: 2px solid var(--as-black);
        padding-left: 0;
        padding-top: 14px;
        margin-top: 14px;
    }
    .practice-progress-groups {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .practice-topbar {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 0;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    /* Whole "Topic: X" / switch-quest / "+ New quest" row dropped on
       mobile — the topic name is already shown inline above the question,
       and the row ate space + pushed the practice-time/mastery bars down. */
    .practice-topbar-left { display: none; }
    .practice-topbar-right {
        width: 100%;
        margin: 0;
        justify-content: center;
        border-left: 0;
        padding-left: 0;
    }
    /* Compact top bar: each group is one row — label stacked over its
       value on the left, the progress bar filling the space to the right. */
    .practice-progress-groups {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 360px;
        gap: 8px;
    }
    .practice-progress-group {
        flex: none;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }
    .practice-progress-row {
        flex: 0 0 104px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 2px;
        text-align: left;
    }
    .practice-progress-row .lp-statusbar-value { white-space: nowrap; }
    .practice-progress-group .lp-qbar {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
}