/* Quiz editor */

.editor { padding-bottom: 80px; }
.editor-head {
    position: sticky; top: var(--bar-h); z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 0; margin-bottom: 8px;
    background: rgba(6, 5, 26, .82); backdrop-filter: blur(14px);
    /* full-bleed band without widening the page */
    box-shadow: 0 0 0 100vmax rgba(6, 5, 26, .82); clip-path: inset(0 -100vmax);
}
.editor-head-actions { display: flex; align-items: center; gap: 8px; }
.save-status { font-size: 13px; color: var(--faint); margin-right: 6px; white-space: nowrap; }
.save-status[data-state="dirty"] { color: var(--amber); }
.save-status[data-state="saving"] { color: var(--muted); }
.save-status[data-state="error"] { color: var(--danger); }

.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.editor-main { display: grid; gap: 20px; min-width: 0; }
.editor-side { position: sticky; top: calc(var(--bar-h) + 72px); display: grid; gap: 16px; }
@media (max-width: 960px) {
    .editor-grid { grid-template-columns: 1fr; }
    .editor-side { position: static; }
}
@media (max-width: 640px) {
    .editor-head .btn-ghost { padding-inline: 8px; }
    .save-status { display: none; }
}

.ed-section.panel { padding: 26px; display: grid; gap: 18px; }
#sec-questions { display: grid; gap: 14px; }
.section-title { display: flex; gap: 14px; align-items: flex-start; }
.section-title h2 { font-size: 22px; margin-bottom: 2px; }
.section-title p { font-size: 14px; }
.sec-num {
    flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-top: 1px; border-radius: 50%;
    border: 1px solid var(--accent); color: var(--accent); font: 700 14px/1 var(--font-display); box-shadow: var(--glow);
}
.sub-head { font-size: 17px; margin-top: 8px; }
.small { font-size: 13px; }
.field-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.input-title { font: 600 20px/1.3 var(--font-display); }
.add-btn { justify-self: start; color: var(--accent); }
.add-btn svg, .btn svg { width: 16px; height: 16px; }

.swatches { display: flex; gap: 10px; min-height: 44px; align-items: center; }
.swatch {
    width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
    background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
    transition: transform .2s var(--ease);
}
.swatch:hover { transform: scale(1.1); }
.swatch[aria-checked="true"] { border-color: var(--text); transform: scale(1.15); }

/* Path style */
.path-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .path-styles { grid-template-columns: 1fr; } }

/* Mode switch */
.mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .mode-switch { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mode-switch { grid-template-columns: 1fr; } }
.mode-card, .vis-option, .start-card {
    display: grid; gap: 4px; text-align: left; padding: 14px 16px; cursor: pointer;
    background: rgba(6, 5, 26, .45); border: 1px solid var(--line); border-radius: 12px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.mode-card b, .vis-option b { font: 600 15px/1.3 var(--font-display); }
.mode-card span, .vis-option span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.mode-card:hover, .vis-option:hover { border-color: var(--line-hi); }
.mode-card[aria-checked="true"], .vis-option[aria-checked="true"] {
    border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, rgba(6, 5, 26, .45));
    box-shadow: inset 0 0 0 1px var(--accent), var(--glow);
}

/* Result hues - one per result so chips are easy to match up */
[data-hue="0"] { --hue: var(--cyan); }
[data-hue="1"] { --hue: var(--magenta); }
[data-hue="2"] { --hue: var(--amber); }
[data-hue="3"] { --hue: var(--lime); }
[data-hue="4"] { --hue: var(--violet); }

.result-list { display: grid; gap: 10px; }
.result-item {
    display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start;
    padding: 12px 10px 12px 16px; border-radius: 12px; background: rgba(6, 5, 26, .45);
    border: 1px solid var(--line); border-left: 3px solid var(--hue);
}
.result-dot { width: 12px; height: 12px; margin-top: 15px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 10px var(--hue); }
.result-fields { display: grid; gap: 0; min-width: 0; }
.result-title { font: 600 17px/1.3 var(--font-display); min-height: 40px; }
.result-fields textarea { min-height: 30px; padding-block: 4px; font-size: 14px; color: var(--muted); resize: none; overflow: hidden; }
.reach { font-size: 12px; color: var(--faint); padding-top: 4px; }
.reach.none { color: var(--amber); }

/* Knowledge score bands */
.band-item { grid-template-columns: 92px 1fr auto; }
.band-min { display: flex; align-items: center; gap: 4px; margin-top: 2px; font: 600 13px/1 var(--font-display); color: var(--hue); }
.band-min .input { min-height: 38px; padding: 4px 6px; text-align: center; font: 700 16px/1 var(--font-display); color: var(--hue); }

.correct-toggle {
    grid-column: 2 / -1; grid-row: 2; justify-self: start;
    display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px;
    border-radius: 999px; cursor: pointer; font: 600 12px/1 var(--font-display);
    border: 1px dashed color-mix(in srgb, var(--lime) 45%, transparent); background: transparent; color: var(--faint);
    transition: all .15s var(--ease);
}
.correct-toggle svg { width: 14px; height: 14px; opacity: .35; }
.correct-toggle:hover { color: var(--lime); border-style: solid; }
.correct-toggle[aria-pressed="true"] {
    border-style: solid; border-color: var(--lime); color: #07061c; background: var(--lime);
    box-shadow: 0 0 14px color-mix(in srgb, var(--lime) 60%, transparent);
}
.correct-toggle[aria-pressed="true"] svg { opacity: 1; }

/* Traits */
.dim-list { display: grid; gap: 10px; }
.dim-item { display: grid; grid-template-columns: 1fr 48px 1fr auto; gap: 10px; align-items: center; }
.dim-end { display: grid; grid-template-columns: 1fr 52px; gap: 6px; }
.dim-code { text-align: center; font: 700 16px/1 var(--font-display); color: var(--accent); padding-inline: 4px; }
.dim-axis { height: 2px; background: linear-gradient(90deg, var(--violet), var(--accent)); box-shadow: var(--glow); position: relative; }
.dim-axis::before, .dim-axis::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.dim-axis::before { left: -2px; background: var(--violet); }
.dim-axis::after { right: -2px; }
@media (max-width: 640px) {
    .dim-item { grid-template-columns: 1fr auto; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
    .dim-axis { display: none; }
    .dim-right { grid-row: 2; }
    .dim-item .icon-btn { grid-row: 1 / span 2; grid-column: 2; }
}
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.type-card { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(6, 5, 26, .45); border: 1px solid var(--line); }
.type-code { font: 700 20px/1.2 var(--font-display); letter-spacing: .12em; color: var(--accent); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent); }
.type-card .input { min-height: 34px; padding-block: 4px; font-size: 14px; }
.type-card textarea { resize: none; color: var(--muted); }

/* Questions */
.question-card { padding: 18px 18px 14px; display: grid; gap: 12px; transition: border-color .2s; }
.question-card:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.question-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; }
.q-num {
    display: grid; place-items: center; width: 34px; height: 34px; margin-top: 4px; border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: 700 15px/1 var(--font-display);
}
textarea.question-text { font: 600 18px/1.4 var(--font-display); resize: none; overflow: hidden; min-height: 44px; }
textarea.input-bare { resize: none; field-sizing: content; }
.q-tools { display: flex; gap: 0; }
@media (max-width: 640px) {
    .question-top { grid-template-columns: auto 1fr; }
    .q-tools { grid-column: 1 / -1; justify-content: flex-end; margin-top: -8px; }
}
.answers { display: grid; gap: 8px; padding-left: 46px; }
@media (max-width: 640px) { .answers { padding-left: 0; } }
.answer-row { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; padding-bottom: 6px; }
.a-letter { width: 22px; text-align: center; font: 600 13px/1 var(--font-display); color: var(--faint); }
.answer-text { min-height: 40px; padding-block: 8px; }
/* Links sit on their own line under the answer, so answer text gets the full width */
.links { grid-column: 2 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.links::before { content: "leads to"; font-size: 12px; color: var(--faint); margin-right: 2px; }
.answer-row:has(.lean) .links::before { content: none; }

.link-chip {
    display: inline-flex; align-items: center; gap: 4px; max-width: 170px; min-height: 30px; padding: 0 11px;
    border-radius: 999px; cursor: pointer; font: 600 12px/1 var(--font-display);
    border: 1px dashed color-mix(in srgb, var(--hue) 45%, transparent); background: transparent; color: var(--faint);
    transition: all .15s var(--ease);
}
.link-chip .chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-chip:hover { color: var(--hue); border-style: solid; }
.link-chip[data-weight="1"] {
    border-style: solid; border-color: var(--hue); color: var(--hue);
    background: color-mix(in srgb, var(--hue) 14%, transparent);
}
.link-chip[data-weight="2"] {
    border-style: solid; border-color: var(--hue); color: #07061c; background: var(--hue);
    box-shadow: 0 0 14px color-mix(in srgb, var(--hue) 60%, transparent);
}
.chip-x { font-size: 11px; opacity: .8; }

.lean { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: 999px; border: 1px solid var(--line); }
.lean-code { min-width: 18px; text-align: center; font: 700 12px/1 var(--font-display); color: var(--muted); }
.lean-step { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--line-hi); background: transparent; cursor: pointer; transition: all .15s; }
.lean-step[data-step="0"] { width: 10px; height: 10px; }
.lean-step[data-step="-1"], .lean-step[data-step="1"] { width: 15px; height: 15px; }
.lean-step:hover { border-color: var(--accent); }
.lean-step[aria-checked="true"] { background: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
.lean-step[data-step="0"][aria-checked="true"] { background: var(--muted); border-color: var(--muted); box-shadow: none; }

.add-question {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; width: 100%;
    border: 1px dashed var(--line-hi); border-radius: var(--radius); background: transparent; cursor: pointer;
    font: 600 16px/1 var(--font-display); color: var(--accent); transition: all .2s;
}
.add-question:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: var(--glow); }
.add-question svg { width: 18px; height: 18px; }
.kbd-hints { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--faint); }
kbd { padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-hi); font: 600 11px/1.6 var(--font-display); color: var(--muted); }
@media (hover: none) { .kbd-hints { display: none; } }

/* Side cards */
.side-card { padding: 20px; display: grid; gap: 12px; }
.side-card h3 { font-size: 16px; }
.vis-options { display: grid; gap: 8px; }
.vis-option { padding: 11px 14px; }
.vis-option[data-vis="public"][aria-checked="true"] { --accent: var(--lime); }
.vis-option[data-vis="unlisted"][aria-checked="true"] { --accent: var(--amber); }
.share-link { display: grid; gap: 8px; }
.share-link .input { font-size: 13px; min-height: 38px; }
.share-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.checklist button {
    display: flex; gap: 10px; align-items: baseline; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px;
    background: transparent; text-align: left; font-size: 14px; color: var(--muted); cursor: pointer;
}
.checklist button::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); transform: translateY(-1px); }
.checklist button:hover { background: var(--panel-hi); color: var(--text); }
.ready { color: var(--lime); font-size: 14px; }
.ready::before { content: "\2713  "; }
.side-card.attention { animation: attention .6s var(--ease); border-color: var(--amber); }
@keyframes attention { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Start screen */
.start { padding-block: 64px; display: grid; gap: 10px; justify-items: start; }
.start h1 { font-size: clamp(34px, 5vw, 52px); }
.start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; width: 100%; margin-top: 24px; }
.start-card { padding: 26px; gap: 10px; min-height: 200px; align-content: start; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.start-card b { font: 700 21px/1.2 var(--font-display); }
.start-card span { color: var(--muted); font-size: 15px; }
.start-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--glow); }
.start-results { --accent: var(--cyan); }
.start-traits { --accent: var(--violet); }
.start-knowledge { --accent: var(--amber); }
.start-example { --accent: var(--magenta); }