/* Appearance roles preserve the violet identity and follow the system. */
:root {
 color-scheme:light;
 --tone-0:#FAF8FB;--tone-1:#F5F0F7;--tone-2:#F2EDF4;--tone-3:#FFFFFF;
 --tone-4:#EEE6F2;--tone-5:#E8DDEB;--tone-6:#E4D6E8;--tone-7:#DCC9E2;
 --tone-8:#D5C0DC;--tone-9:#C8AFD0;--tone-10:#806686;--tone-11:#6B4D71;
 --tone-12:#56335D;--tone-13:#411A48;--tone-14:#170029;
 --safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);
 --safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);
 --chrome:color-mix(in srgb,var(--bg) 92%,transparent);
 --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23411A48' stroke-width='1.75'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media(prefers-color-scheme:dark) {
 :root {color-scheme:dark;--tone-0:#03001A;--tone-1:#07001E;--tone-2:#0B0022;--tone-3:#110025;--tone-4:#170029;--tone-5:#1D002D;--tone-6:#250030;--tone-7:#2C0133;--tone-8:#411A48;--tone-9:#56335D;--tone-10:#6B4D71;--tone-11:#806686;--tone-12:#95809A;--tone-13:#AA99AF;--tone-14:#BFB3C3;--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BFB3C3' stroke-width='1.75'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
}
html {scrollbar-gutter:stable}
body {isolation:isolate}
.focused-journey>header,.focused-journey[data-view=skills]>header {
 min-height:calc(4.5rem + var(--safe-top));padding-top:var(--safe-top);
 padding-left:max(4%,calc(var(--safe-left) + 16px));padding-right:max(4%,calc(var(--safe-right) + 16px));
 background:var(--bg);background:var(--chrome);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.focused-journey header .brand {min-height:44px;min-width:44px}
.focused-journey .chapter-layout {padding-bottom:calc(12px + var(--safe-bottom));padding-left:max(4%,calc(var(--safe-left) + 16px));padding-right:max(4%,calc(var(--safe-right) + 16px))}
.focused-journey .journey-opening.hero,.focused-journey .apply-experience,.focused-journey .sources {padding-left:max(5%,calc(var(--safe-left) + 16px));padding-right:max(5%,calc(var(--safe-right) + 16px));padding-bottom:calc(32px + var(--safe-bottom))}
.focused-journey[data-view=skills] .chapter-layout {padding-bottom:calc(48px + var(--safe-bottom))}
#idea-jump {background-image:var(--select-arrow)}
:where(button,a,summary,select,[role=tab]) {touch-action:manipulation}
button:not(:disabled):active,.primary:active,.apply-entry:active,summary:active {opacity:.72;transition:none!important}
button:disabled {cursor:default}
:where(button,a,summary,input,textarea,select):focus-visible {outline:2px solid var(--focus);outline-offset:4px}
.focused-journey :is(.chapter-utilities a,.sources a) {min-height:44px;display:inline-flex;align-items:center}
.library-row-top .icon,.library-lessons .icon,.library-source-links .icon,.lesson-controls .icon,.primary .icon,.inline-skills .icon {width:1.125em;height:1.125em;flex-shrink:0}

/* One task at a time; native dialogs own focus and inert background content. */
html:has(dialog[open]) {overflow:hidden}
#library-detail-dialog,#skill-install-dialog {overscroll-behavior:contain;scrollbar-gutter:stable;max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);scroll-padding-block:16px}
#skill-install-dialog {padding:24px}
#skill-install-dialog .install-dialog-head {position:sticky;top:-24px;z-index:2;background:var(--surface);padding-block:12px}
#skill-install-back {display:inline-flex;align-items:center;min-height:44px;padding:8px 0;margin:0 0 8px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:var(--text-caption)}
#skill-install-back[hidden] {display:none}
.library-dialog-bar {padding-top:max(16px,var(--safe-top))}
#library-dialog-body {padding-bottom:calc(24px + var(--safe-bottom))}
.library-search input[type=search]::-webkit-search-cancel-button {display:none}
.library-clear-search {display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;min-height:44px;padding:8px;margin-right:-12px;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.library-clear-search[hidden] {display:none}
.library-clear-search .icon {width:20px;height:20px}
.library-search:has(.library-clear-search:not([hidden])) kbd {display:none}
.library-search:has(.library-clear-search:not([hidden])) {gap:8px}
.library-skill-row:active {background:var(--palette-6)}

/* Progress has a visible cancel path and a non-motion equivalent. */
#apply-cancel {min-height:44px;padding:10px 16px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:var(--text-caption);text-decoration:underline;text-underline-offset:4px}
#apply-cancel[hidden] {display:none}
.apply-submit[aria-busy=true]::after {content:'';width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;flex-shrink:0;animation:apply-progress .8s linear infinite}
.apply-submit[aria-busy=true]>.icon {display:none}
#apply-project[aria-invalid=true] {border-color:var(--ink);outline:1px solid var(--ink)}
@keyframes apply-progress {to {transform:rotate(1turn)}}
@media(hover:hover) {
 button:not(:disabled):hover,summary:hover {filter:brightness(.96)}
 .library-skill-row:hover {filter:none;background:var(--palette-4)}
}
@media(max-width:720px) {
 :root {--text-body:1.0625rem}
 .focused-journey>header,.focused-journey[data-view=skills]>header {min-height:calc(4rem + var(--safe-top));padding-top:calc(8px + var(--safe-top));padding-bottom:8px;padding-inline:max(16px,var(--safe-left)) max(16px,var(--safe-right))}
 .focused-journey .chapter-layout {padding-inline:max(16px,var(--safe-left)) max(16px,var(--safe-right))}
 .focused-journey[data-view=skills]>header>.library-search {gap:8px}
 .library-clear-search {margin-right:-8px}
 #library-detail-dialog {width:calc(100% - 24px)}
 #skill-install-dialog {padding:20px}
 #skill-install-dialog .install-dialog-head {top:-20px}
}
@media(prefers-reduced-transparency:reduce) {
 .focused-journey>header,.focused-journey[data-view=skills]>header {background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
 dialog::backdrop {background:rgba(3,0,26,.94)}
}
@media(prefers-contrast:more) {
 :root {--tone-10:#56335D;--tone-11:#411A48;--tone-12:#2C0133;--tone-13:#170029;--tone-14:#03001A;--line:var(--tone-11)}
 .focused-journey>header,.focused-journey[data-view=skills]>header {background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--control-border)}
 :is(button,input,textarea,select,.library-inspector,.role-flow-tab) {border-color:var(--control-border)}
}
@media(prefers-color-scheme:dark) and (prefers-contrast:more) {
 :root {--tone-10:#95809A;--tone-11:#AA99AF;--tone-12:#BFB3C3;--tone-13:#E4DAE8;--tone-14:#FFFFFF}
}
@media(prefers-reduced-motion:reduce) {
 .apply-submit[aria-busy=true]::after {animation:none}
 button:active {transform:none}
}
@media(forced-colors:active) {
 :is(button,input,textarea,select,dialog,.library-inspector,.role-flow-tab,.workflow-card,.concept-step,.slice-node) {border:1px solid ButtonText}
 :is([aria-selected=true],[aria-pressed=true]) {outline:2px solid Highlight;outline-offset:-3px}
}
/* Selection feedback is immediate; appearance changes never cross-fade text into its background. */
body.focused-journey :is(button,a,summary,[role=tab],.workflow-card,.incident-screen,.role-flow-gate) {transition-property:opacity,transform}
#library-search {min-height:44px}
.focused-journey[data-view=skills]>header>.library-search {min-height:46px;flex:1 1 20rem;max-width:32.5rem}
@media(max-width:1100px){.focused-journey[data-view=skills]>header>.library-search {max-width:none}}
@media(max-width:720px){.focused-journey[data-view=skills]>header>.library-search {flex-basis:8rem}}
.focused-journey>header nav>a[aria-current=page] {color:var(--ink);font-weight:600}
@media(prefers-reduced-motion:no-preference) {
 body.focused-journey button:active:not(:disabled),body.focused-journey .primary:active {transform:scale(.985)}
 body.focused-journey button.library-skill-row:active,body.focused-journey .library-categories button:active,body.focused-journey .segmented button:active {transform:none}
}
@media(prefers-reduced-motion:reduce) {
 body.focused-journey button:active:not(:disabled),body.focused-journey .primary:active {transform:none}
}