/* Optional terminal palettes plus the shared theme selector and wordmark. */
.jik-wordmark { display: inline-flex; align-items: baseline; gap: .28em; font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: -.04em; white-space: nowrap; }
.jik-wordmark-prompt, .jik-wordmark-cursor { color: var(--bs-primary); }
.jik-wordmark-separator { color: var(--bs-secondary-color); }
.jik-wordmark-cursor { margin-left: -.25em; }
.jik-brand { min-width: 0; }
.jik-brand-tagline { margin: .1rem 0 0; font: .65rem/1.35 ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--bs-body-color); }
.jik-brand-statement { max-width: 40ch; font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 600; letter-spacing: .015em; }
.theme-picker { min-width: 0; }
.theme-picker .form-select { width: 16rem; max-width: 28vw; }
@media (max-width: 575.98px) {
  .theme-picker .form-select { width: 8.5rem; max-width: 30vw; }
  .jik-wordmark { font-size: 1rem; margin-right: 0; gap: .12em; }
  .app-topbar .container-fluid { gap: .4rem; }
  .app-topbar .navbar-toggler { padding: .25rem .4rem; }
}

:root[data-jik-phosphor="green"] {
  --phosphor-bright: #33FF33;
  --phosphor-muted: #00AA00;
  --phosphor-rgb: 51, 255, 51;
  --phosphor-muted-rgb: 0, 170, 0;
  --phosphor-tube: #0A110A;
  --phosphor-tube-rgb: 10, 17, 10;
}
:root[data-jik-phosphor="amber"] {
  --phosphor-bright: #FFB000;
  --phosphor-muted: #996600;
  --phosphor-rgb: 255, 176, 0;
  --phosphor-muted-rgb: 153, 102, 0;
  --phosphor-tube: #110C00;
  --phosphor-tube-rgb: 17, 12, 0;
}
:root[data-jik-phosphor] {
  color-scheme: dark;
  --phosphor-black: #000000;
  --phosphor-line: rgba(var(--phosphor-muted-rgb), .55);
  --phosphor-wash: rgba(var(--phosphor-rgb), .10);
  --phosphor-selection: rgba(var(--phosphor-rgb), .25);
  --bs-font-sans-serif: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-color: var(--phosphor-bright);
  --bs-body-color-rgb: var(--phosphor-rgb);
  --bs-body-bg: var(--phosphor-black);
  --bs-body-bg-rgb: 0, 0, 0;
  --bs-emphasis-color: var(--phosphor-bright);
  --bs-emphasis-color-rgb: var(--phosphor-rgb);
  --bs-secondary-color: var(--phosphor-muted);
  --bs-secondary-color-rgb: var(--phosphor-muted-rgb);
  --bs-tertiary-color: var(--phosphor-muted);
  --bs-tertiary-color-rgb: var(--phosphor-muted-rgb);
  --bs-secondary-bg: var(--phosphor-tube);
  --bs-secondary-bg-rgb: var(--phosphor-tube-rgb);
  --bs-tertiary-bg: var(--phosphor-tube);
  --bs-tertiary-bg-rgb: var(--phosphor-tube-rgb);
  --bs-primary: var(--phosphor-bright);
  --bs-primary-rgb: var(--phosphor-rgb);
  --bs-secondary: var(--phosphor-muted);
  --bs-secondary-rgb: var(--phosphor-muted-rgb);
  --bs-success: var(--phosphor-bright);
  --bs-success-rgb: var(--phosphor-rgb);
  --bs-info: var(--phosphor-bright);
  --bs-info-rgb: var(--phosphor-rgb);
  --bs-warning: var(--phosphor-bright);
  --bs-warning-rgb: var(--phosphor-rgb);
  --bs-danger: var(--phosphor-bright);
  --bs-danger-rgb: var(--phosphor-rgb);
  --bs-light-rgb: var(--phosphor-tube-rgb);
  --bs-dark-rgb: 0, 0, 0;
  --bs-link-color: var(--phosphor-bright);
  --bs-link-color-rgb: var(--phosphor-rgb);
  --bs-link-hover-color: var(--phosphor-bright);
  --bs-link-hover-color-rgb: var(--phosphor-rgb);
  --bs-code-color: var(--phosphor-bright);
  --bs-border-color: var(--phosphor-line);
  --bs-border-color-translucent: var(--phosphor-line);
  --bs-focus-ring-color: var(--phosphor-selection);
  --bs-form-valid-color: var(--phosphor-bright);
  --bs-form-valid-border-color: var(--phosphor-muted);
  --bs-form-invalid-color: var(--phosphor-bright);
  --bs-form-invalid-border-color: var(--phosphor-bright);
  --bs-box-shadow: 0 0 1.5rem rgba(var(--phosphor-rgb), .09);
  --bs-box-shadow-sm: 0 0 .8rem rgba(var(--phosphor-rgb), .06);
  --bs-box-shadow-lg: 0 0 3rem rgba(var(--phosphor-rgb), .12);
}

[data-jik-phosphor] body { background: var(--phosphor-black); color: var(--phosphor-bright); }
[data-jik-phosphor] ::selection { color: var(--phosphor-bright); background: var(--phosphor-selection); }
[data-jik-phosphor] :focus-visible { outline: 2px solid var(--phosphor-bright); outline-offset: 3px; }
[data-jik-phosphor] :is(h1, h2, .navbar-brand) { text-shadow: 0 0 .65rem rgba(var(--phosphor-rgb), .22); }
[data-jik-phosphor] :is(.jik-wordmark-prompt, .jik-wordmark-separator) { color: var(--phosphor-muted); }
[data-jik-phosphor] a:hover { text-decoration-color: var(--phosphor-bright); }

/* Keep the full-page code rain visible through the existing panels. */
[data-jik-phosphor] .jik-rain-page {
  --jik-panel: rgba(var(--phosphor-tube-rgb), var(--jik-panel-alpha));
  --jik-chrome: rgba(var(--phosphor-tube-rgb), var(--jik-chrome-alpha));
  --jik-rain-ink: var(--phosphor-bright);
  background: var(--phosphor-black);
}
[data-jik-phosphor] .jik-rain-page :is(.hero, .jik-code-hero) {
  background: radial-gradient(ellipse at 90% 10%, rgba(var(--phosphor-rgb), .045), transparent 60%), rgba(var(--phosphor-tube-rgb), var(--jik-hero-alpha)) !important;
  border: 1px solid var(--phosphor-line);
  color: var(--phosphor-bright) !important;
}
[data-jik-phosphor] .avatar { background: var(--phosphor-wash); color: var(--phosphor-bright); border: 1px solid var(--phosphor-muted); }
[data-jik-phosphor] :is(.jik-hero-actions a, .jik-result > code) { color: var(--phosphor-bright); }
[data-jik-phosphor] .jik-motion-button { background: var(--phosphor-tube); border-color: var(--phosphor-muted); color: var(--phosphor-bright); }
[data-jik-phosphor] .jik-motion-button:focus-visible,
[data-jik-phosphor] .jik-tutorial :is(button, select, pre):focus-visible { outline-color: var(--phosphor-bright); }
[data-jik-phosphor] .jik-lesson-code { background: rgba(0, 0, 0, var(--jik-lesson-alpha)); color: var(--phosphor-bright); }
[data-jik-phosphor] :is(.jik-file-bar, .jik-result) { border-color: var(--phosphor-line); }
[data-jik-phosphor] :is(.jik-file-bar, .jik-result > span) { color: var(--phosphor-muted); }
[data-jik-phosphor] .jik-file-dot { background: var(--phosphor-bright); box-shadow: 0 0 .5rem var(--phosphor-muted); }
[data-jik-phosphor] .jik-copy { background: var(--phosphor-tube); border-color: var(--phosphor-muted); color: var(--phosphor-bright); }
[data-jik-phosphor] :is(.jik-copy, .jik-rain-snippet > span) { font-family: var(--bs-font-sans-serif); }
[data-jik-phosphor] :is(.jik-token-native, .jik-token-form, .jik-token-number, .jik-token-string, .jik-token-keyword),
[data-jik-phosphor] .jik-code-rain :is(.jik-token-native, .jik-token-form, .jik-token-number, .jik-token-string, .jik-token-keyword) { color: var(--phosphor-bright); }
[data-jik-phosphor] :is(.jik-token-comment, .jik-token-punctuation),
[data-jik-phosphor] .jik-code-rain :is(.jik-token-comment, .jik-token-punctuation) { color: var(--phosphor-muted); }
[data-jik-phosphor] :is(.jik-token-native, .jik-token-form) { font-weight: 700; }
[data-jik-phosphor] .jik-token-comment { font-style: italic; }

/* Bootstrap components have local variables in addition to root variables. */
[data-jik-phosphor] :is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-light, .btn-dark) {
  --bs-btn-color: var(--phosphor-black);
  --bs-btn-bg: var(--phosphor-bright);
  --bs-btn-border-color: var(--phosphor-bright);
  --bs-btn-hover-color: var(--phosphor-bright);
  --bs-btn-hover-bg: var(--phosphor-tube);
  --bs-btn-hover-border-color: var(--phosphor-bright);
  --bs-btn-active-color: var(--phosphor-bright);
  --bs-btn-active-bg: var(--phosphor-tube);
  --bs-btn-active-border-color: var(--phosphor-bright);
  --bs-btn-disabled-color: var(--phosphor-black);
  --bs-btn-disabled-bg: var(--phosphor-muted);
  --bs-btn-disabled-border-color: var(--phosphor-muted);
  --bs-btn-focus-shadow-rgb: var(--phosphor-rgb);
}
[data-jik-phosphor] :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-danger, .btn-outline-light, .btn-outline-dark) {
  --bs-btn-color: var(--phosphor-bright);
  --bs-btn-border-color: var(--phosphor-muted);
  --bs-btn-hover-color: var(--phosphor-black);
  --bs-btn-hover-bg: var(--phosphor-bright);
  --bs-btn-hover-border-color: var(--phosphor-bright);
  --bs-btn-active-color: var(--phosphor-black);
  --bs-btn-active-bg: var(--phosphor-bright);
  --bs-btn-active-border-color: var(--phosphor-bright);
  --bs-btn-disabled-color: var(--phosphor-muted);
  --bs-btn-disabled-border-color: var(--phosphor-muted);
  --bs-btn-focus-shadow-rgb: var(--phosphor-rgb);
}
[data-jik-phosphor] :is(.btn-danger, .btn-outline-danger) { border-style: dashed; }
[data-jik-phosphor] :is(.text-light, .text-white, .text-dark, .text-black) { color: var(--phosphor-bright) !important; }
[data-jik-phosphor] :is(.text-bg-primary, .text-bg-secondary, .text-bg-success, .text-bg-info, .text-bg-warning, .text-bg-danger) { background-color: var(--phosphor-bright) !important; color: var(--phosphor-black) !important; }
[data-jik-phosphor] :is(.text-bg-light, .text-bg-dark) { background-color: var(--phosphor-tube) !important; color: var(--phosphor-bright) !important; }
[data-jik-phosphor] :is(.bg-primary-subtle, .bg-secondary-subtle, .bg-success-subtle, .bg-info-subtle, .bg-warning-subtle, .bg-danger-subtle) { background-color: var(--phosphor-wash) !important; }
[data-jik-phosphor] :is(.text-primary-emphasis, .text-secondary-emphasis, .text-success-emphasis, .text-info-emphasis, .text-warning-emphasis, .text-danger-emphasis) { color: var(--phosphor-bright) !important; }
[data-jik-phosphor] :is(.alert, .list-group-item, .dropdown-menu, .modal-content, .offcanvas, .toast, .popover, .accordion) {
  --bs-alert-color: var(--phosphor-bright);
  --bs-alert-bg: var(--phosphor-tube);
  --bs-alert-border-color: var(--phosphor-muted);
  --bs-alert-link-color: var(--phosphor-bright);
  --bs-list-group-color: var(--phosphor-bright);
  --bs-list-group-bg: var(--phosphor-tube);
  --bs-list-group-border-color: var(--phosphor-line);
  --bs-list-group-action-color: var(--phosphor-bright);
  --bs-list-group-action-hover-color: var(--phosphor-bright);
  --bs-list-group-action-hover-bg: var(--phosphor-wash);
  --bs-list-group-action-active-color: var(--phosphor-black);
  --bs-list-group-action-active-bg: var(--phosphor-bright);
  --bs-list-group-active-color: var(--phosphor-black);
  --bs-list-group-active-bg: var(--phosphor-bright);
  --bs-list-group-active-border-color: var(--phosphor-bright);
  --bs-dropdown-bg: var(--phosphor-tube);
  --bs-dropdown-link-color: var(--phosphor-bright);
  --bs-dropdown-link-hover-color: var(--phosphor-bright);
  --bs-dropdown-link-hover-bg: var(--phosphor-wash);
  --bs-dropdown-link-active-color: var(--phosphor-black);
  --bs-dropdown-link-active-bg: var(--phosphor-bright);
  --bs-dropdown-header-color: var(--phosphor-muted);
  --bs-modal-bg: var(--phosphor-tube);
  --bs-offcanvas-bg: var(--phosphor-tube);
  --bs-toast-bg: var(--phosphor-tube);
  --bs-toast-header-bg: var(--phosphor-tube);
  --bs-toast-header-color: var(--phosphor-bright);
  --bs-popover-bg: var(--phosphor-tube);
  --bs-popover-header-bg: var(--phosphor-tube);
  --bs-popover-header-color: var(--phosphor-bright);
  --bs-popover-body-color: var(--phosphor-bright);
  --bs-accordion-bg: var(--phosphor-tube);
  --bs-accordion-btn-color: var(--phosphor-bright);
  --bs-accordion-active-color: var(--phosphor-bright);
  --bs-accordion-active-bg: var(--phosphor-wash);
}
[data-jik-phosphor] .alert-warning { border-left-width: .3rem; }
[data-jik-phosphor] .alert-danger { border-style: dashed; border-left-width: .3rem; }
[data-jik-phosphor] :is(.invalid-feedback, .errorlist) { font-weight: 700; }
[data-jik-phosphor] form p :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, select) { background-color: var(--phosphor-black); color: var(--phosphor-bright); border: 1px solid var(--phosphor-muted); border-radius: .375rem; padding: .375rem .75rem; caret-color: var(--phosphor-bright); }
[data-jik-phosphor] form p :is(input, textarea)::placeholder { color: var(--phosphor-muted); opacity: 1; }
[data-jik-phosphor] :is(.form-control, .form-select):focus { border-color: var(--phosphor-bright); box-shadow: 0 0 0 .2rem var(--phosphor-selection); }
[data-jik-phosphor] .form-check-input { background-color: var(--phosphor-tube); border-color: var(--phosphor-muted); }
[data-jik-phosphor] .form-check-input:checked { background-color: var(--phosphor-muted); border-color: var(--phosphor-bright); }
[data-jik-phosphor] .form-check-input:focus { border-color: var(--phosphor-bright); box-shadow: 0 0 0 .2rem var(--phosphor-selection); }
[data-jik-phosphor] input[type="range"] { accent-color: var(--phosphor-bright); }
[data-jik-phosphor] .nav-pills { --bs-nav-pills-link-active-color: var(--phosphor-black); --bs-nav-pills-link-active-bg: var(--phosphor-bright); }
[data-jik-phosphor] .pagination {
  --bs-pagination-color: var(--phosphor-bright);
  --bs-pagination-bg: var(--phosphor-tube);
  --bs-pagination-hover-color: var(--phosphor-bright);
  --bs-pagination-hover-bg: var(--phosphor-wash);
  --bs-pagination-focus-color: var(--phosphor-bright);
  --bs-pagination-focus-bg: var(--phosphor-tube);
  --bs-pagination-active-color: var(--phosphor-black);
  --bs-pagination-active-bg: var(--phosphor-bright);
  --bs-pagination-active-border-color: var(--phosphor-bright);
}
[data-jik-phosphor] :is(.table, .table-primary, .table-secondary, .table-success, .table-info, .table-warning, .table-danger, .table-light, .table-dark) {
  --bs-table-color: var(--phosphor-bright);
  --bs-table-bg: var(--phosphor-tube);
  --bs-table-border-color: var(--phosphor-line);
  --bs-table-striped-color: var(--phosphor-bright);
  --bs-table-striped-bg: var(--phosphor-wash);
  --bs-table-active-color: var(--phosphor-bright);
  --bs-table-active-bg: var(--phosphor-wash);
  --bs-table-hover-color: var(--phosphor-bright);
  --bs-table-hover-bg: var(--phosphor-wash);
}
[data-jik-phosphor] :is(.table-success, .table-danger, .table-warning) {
  --bs-table-color: var(--phosphor-bright);
  --bs-table-bg: var(--phosphor-tube);
  --bs-table-border-color: var(--phosphor-muted);
}
[data-jik-phosphor] .table-danger { text-decoration: line-through; }
[data-jik-phosphor] .table-success { font-weight: 700; }
[data-jik-phosphor] .table-warning { border-left: 3px double var(--phosphor-bright); }
[data-jik-phosphor] .progress-bar { background: var(--phosphor-bright) !important; color: var(--phosphor-black); }
[data-jik-phosphor] .pattern-card { border-top-color: var(--phosphor-muted) !important; }
[data-jik-phosphor] [class*="band-badge-"] { color: var(--phosphor-bright); background: var(--phosphor-tube); border: 1px solid var(--phosphor-muted); }
[data-jik-phosphor] .band-badge-frontier { border-style: dashed; }
[data-jik-phosphor] .band-badge-growth { border-style: dotted; }
[data-jik-phosphor] .band-badge-practice { border-style: double; }
[data-jik-phosphor] .band-badge-mastered { color: var(--phosphor-muted); }

/* Lisp Lab and applet source editors: no changes to evaluation or canvas output. */
[data-jik-phosphor] :is(.repl-shell, .jik-editor, .jik-editor + .editor-status) { background: var(--phosphor-black); color: var(--phosphor-bright); border-color: var(--phosphor-line); }
/* Apply translucency to surfaces, never to the panel's text or controls. */
[data-jik-phosphor] .jik-rain-page :is(.repl-shell, .jik-editor) { background: rgba(0, 0, 0, var(--jik-editor-alpha)); }
[data-jik-phosphor] :is(.repl-toolbar, .repl-pane, .editor-status, .repl-metrics) { border-color: var(--phosphor-line); }
[data-jik-phosphor] :is(.editor-status, .pane-label, .repl-metrics) { color: var(--phosphor-muted); }
[data-jik-phosphor] :is(#lisp-output, .repl-metrics dd, #diagnostic-status) { color: var(--phosphor-bright); }
[data-jik-phosphor] #diagnostic-status:not(:empty) { text-decoration: underline wavy; }
[data-jik-phosphor] .editor-input { caret-color: var(--phosphor-bright); color: transparent; -webkit-text-fill-color: transparent; }
[data-jik-phosphor] .editor-input::selection { color: transparent; background: var(--phosphor-selection); }
[data-jik-phosphor] :is(.tok-string, .tok-number, .tok-boolean, .tok-keyword, .tok-special, .tok-native, .tok-function, .tok-symbol, .tok-paren) { color: var(--phosphor-bright); }
[data-jik-phosphor] :is(.tok-comment, .tok-paren.depth-1, .tok-paren.depth-2, .tok-paren.depth-3) { color: var(--phosphor-muted); }
[data-jik-phosphor] .tok-function { font-weight: 700; }
[data-jik-phosphor] .tok-match { background: var(--phosphor-bright); color: var(--phosphor-black) !important; }
[data-jik-phosphor] .tok-invalid { background: var(--phosphor-wash); color: var(--phosphor-bright) !important; text-decoration: underline wavy; outline: 1px dashed var(--phosphor-bright); }
@media print {
  [data-jik-phosphor] body { background: white; color: black; }
  [data-jik-phosphor] .theme-picker { display: none; }
}