/* Shared journey tokens extend the original Seed palette and both themes. */
:root {
    --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem;
    --radius-control: .75rem; --radius-panel: 1.25rem;
    --duration-feedback: 180ms; --duration-enter: 280ms;
    --ease-feedback: cubic-bezier(.2,.7,.2,1);
    --text-small: .8125rem; --text-body: 1rem;
    --muted: #62647e;
}
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 14px 20px; background: var(--surface); color: var(--purple); border: 2px solid currentColor; }
.skip-link:focus { top: 12px; }
select:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.page-wrap { max-width: 1560px; margin-inline: auto; }
.page h2 { line-height: 1.3; }
.panel-description, .hero-heading p, .page-title-row p, .auth-card__heading p { font-size: .9375rem; line-height: 1.65; }
.panel-kicker, .eyebrow { line-height: 1.5; }
.panel, .auth-card, .question-card { border-radius: var(--radius-panel); }
.primary-button, .soft-button, .outline-button, .theme-toggle, .icon-button { min-height: 44px; font-size: var(--text-small); }
.theme-toggle, .icon-button { min-width: 44px; }
.primary-button { background: var(--purple-deep); color: #fff; }
.primary-button, .outline-button, .soft-button { transition: transform var(--duration-feedback), box-shadow var(--duration-feedback); }
.primary-button:active, .outline-button:active, .soft-button:active { transform: translateY(1px); }
.mission-row__description, .mission-row__meta, .auth-link, .auth-card__footer, .auth-form label { font-size: var(--text-small); line-height: 1.6; }
.mission-row__top strong { font-size: 1rem; }
.status-pill { font-size: .75rem; }
.auth-form input, .question-filter__field select { min-height: 48px; font-size: 1rem; }
.auth-form { gap: 20px; }
.password-toggle { align-self: flex-start; min-height: 44px; margin-top: -16px; padding: 8px 0; background: transparent; color: var(--purple); font-size: .8125rem; }
.form-alert { font-size: .875rem; }
.journey-next { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: clamp(20px,3vw,36px); margin-top: 24px; border: 1px solid var(--line); border-left: 4px solid var(--purple); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow); }
.journey-next h2 { margin: 8px 0; font: 800 clamp(22px,2.3vw,30px)/1.25 Manrope,sans-serif; }
.journey-next p { color: var(--muted); max-width: 65ch; line-height: 1.6; }
.journey-next small { color: var(--muted); }
.journey-next .primary-button { flex-shrink: 0; }
.knowledge-panel, .activity-panel { padding: clamp(18px,3vw,32px); margin-top: 24px; }
.knowledge-tree { list-style: none; margin: 0 0 0 20px; padding: 0 0 0 24px; border-left: 2px solid var(--line); }
.knowledge-tree--root { margin: 24px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: start; }
.knowledge-node { position: relative; min-width: 0; margin-block: 12px; }
.knowledge-tree:not(.knowledge-tree--root) > .knowledge-node::before { content: ''; position: absolute; top: 29px; left: -24px; width: 24px; height: 2px; background: var(--line); }
.knowledge-node summary { cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); transition: border-color var(--duration-feedback), background var(--duration-feedback); }
.knowledge-node summary:hover, .knowledge-node details[open] > summary { border-color: var(--purple); background: var(--surface-muted); }
.knowledge-node summary::after { content: '+'; margin-left: auto; font-size: 20px; color: var(--purple); }
.knowledge-node details[open] > summary::after { content: '−'; }
.knowledge-node summary::-webkit-details-marker { display: none; }
.knowledge-node__marker { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; color: var(--purple); border: 1px solid var(--line); border-radius: 50%; }
.knowledge-node__name { min-width: 0; }
.knowledge-node__name strong { display: block; font-size: .9375rem; overflow-wrap: anywhere; }
.knowledge-node__name small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.6; margin-top: 4px; }
.knowledge-node__state { font-size: .75rem; color: var(--purple); margin-left: auto; }
.knowledge-node--review > details > summary { border-left: 4px solid var(--amber); }
.knowledge-node__detail { padding: 0 12px 16px; font-size: .875rem; line-height: 1.65; color: var(--muted); }
.knowledge-node__detail a { white-space: normal; }
.activity-list { list-style: none; margin: 12px 0 0; padding: 0; }
.activity-list li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.activity-list li:last-child { border: 0; }
.activity-list strong { font-size: .9375rem; }
.activity-list small { display: block; color: var(--muted); line-height: 1.6; margin-top: 4px; }
.activity-mark { color: var(--purple); background: var(--surface-muted); border-radius: 50%; padding: 12px; }
.mission-search { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.mission-search label { font-size: .875rem; font-weight: 700; }
.mission-search input { flex: 1; min-width: 180px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: 1rem; }
.sidebar-help { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
#question-filter-title { scroll-margin-top: 100px; }
.question-context, .question-introduction { font-size: 1.0625rem; line-height: 1.85; overflow-wrap: anywhere; }
.question-context img, .answer-image { display: block; max-width: 100%; height: auto; margin-block: 16px; }
.question-topics { font-size: .875rem; color: var(--muted); line-height: 1.6; }
.answer-option__text { font-size: 1rem; line-height: 1.65; font-weight: 500; }
.answer-option { min-height: 64px; transition: background var(--duration-feedback), border-color var(--duration-feedback), opacity var(--duration-feedback); }
.answer-option__choice { flex-wrap: wrap; }
.answer-option__text { flex: 1; min-width: 0; }
.answer-image { flex-basis: 100%; object-fit: contain; }
.answer-option__eliminate { min-width: 44px; min-height: 44px; }
.question-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.question-dots button { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.question-dots .question-dot--done { color: var(--ink); background: var(--surface-muted); border-color: var(--green); }
.question-dots .question-dot--done::after { content: '✓'; font-size: 10px; margin-left: 2px; }
.question-dots .question-dot--current { border: 2px solid var(--purple); color: var(--purple); }
.question-side__header { gap: 8px; flex-wrap: wrap; }
.question-side { align-self: start; }
.question-card h1 { scroll-margin-top: 24px; }
.answer-feedback { font-size: .9375rem; line-height: 1.6; }
.answer-feedback--correct { color: #23633f; background: #e9f8ee; }
.answer-feedback--try, .answer-feedback--error { color: #8c344b; background: #fff0f3; }
html[data-theme=dark] .answer-feedback--correct { color: #9be6bb; background: #204c39; }
html[data-theme=dark] .answer-feedback--try, html[data-theme=dark] .answer-feedback--error { color: #ffb1c0; background: #4a2531; }
.theme-toggle--floating { top: auto; bottom: 18px; }
@keyframes journey-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes journey-complete { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
    .mission-question:not([hidden]), .answer-feedback:not(:empty), .knowledge-node__detail { animation: journey-enter var(--duration-enter) var(--ease-feedback); }
    .completion-view:not([hidden]) .completion-card__icon { animation: journey-complete 360ms var(--ease-feedback); }
    .progress-fill, .question-progress > span { transition: width 280ms var(--ease-feedback); }
}
@media (max-width: 1050px) {
    .knowledge-tree--root { grid-template-columns: 1fr; }
    .question-side { display: block; order: -1; }
    .question-tip { display: none; }
}
@media (max-width: 760px) {
    .home-grid, .home-grid__side { flex-direction: column; }
    .journey-next { flex-direction: column; align-items: stretch; gap: 16px; }
    .knowledge-tree { margin-left: 8px; padding-left: 12px; }
    .knowledge-tree--root { margin-left: 0; padding-left: 0; }
    .knowledge-tree:not(.knowledge-tree--root) > .knowledge-node::before { left: -12px; width: 12px; }
    .knowledge-node summary { flex-wrap: wrap; padding: 12px; gap: 8px; }
    .knowledge-node__state { width: 100%; margin-left: 40px; }
    .knowledge-node summary::after { position: absolute; right: 8px; top: 12px; }
    .knowledge-node__name { flex: 1; padding-right: 12px; }
    .mission-row { flex-wrap: wrap; }
    .mission-row__body { flex: 1; min-width: 0; }
    .mission-row__side { width: 100%; margin-left: 48px; }
    .tabs { gap: 8px; flex-wrap: wrap; }
    .tabs a { min-height: 44px; font-size: .8125rem; }
    .question-filter { grid-template-columns: 1fr; }
    .question-filter__field--subject { grid-column: auto; }
    .question-dots { max-height: 104px; overflow-y: auto; }
    .question-side { padding: 16px; }
    .mobile-nav { height: auto; min-height: 70px; }
    .mobile-nav a { min-height: 48px; justify-content: center; font-size: .75rem; }
    .completion-card > p, .completion-metrics small, .completion-recommendation p { font-size: .8125rem; line-height: 1.6; }
}