:root { --dark-bg: #111827; --medium-bg: #1f2937; --light-bg: #374151; --border-color: #4b5563; --primary-accent: #1a73e8; --primary-accent-hover: #1765cc; --text-light: #e5e7eb; --text-medium: #d1d5db; --text-dark: #9ca3af; --success-green: #16a34a; --error-red: #dc2626; --led-gray: #6b7280; } body { font-family: 'Inter', sans-serif; margin: 0; } /* App-shell layout is scoped to the app's so that this stylesheet can be shared by brutus_help.html without its bare-body flex-column/height/overflow rules overriding the docs layout. */ body.app-shell { background-color: #f9fafb; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; } #app-container { display: flex; width: 100%; flex-grow: 1; min-height: 0; } #controls-panel { width: 400px; min-width: 300px; max-width: 700px; flex-shrink: 0; padding: 24px; background-color: var(--dark-bg); border-right: 1px solid var(--light-bg); overflow-y: visible; color: var(--text-medium); display: flex; flex-direction: column; position: relative; z-index: 20; } #drag-handle { width: 6px; cursor: col-resize; background-color: var(--light-bg); flex-shrink: 0; transition: background-color 0.2s; } #drag-handle:hover, #drag-handle:active { background-color: var(--primary-accent); } #results-area { flex-grow: 1; position: relative; background-color: #ffffff; min-width: 0; display: flex; flex-direction: column; padding: 1.5rem; color: var(--medium-bg); z-index: 10; } .control-group { margin-bottom: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--light-bg); } .control-group:first-child { border-top: none; padding-top: 0; } .control-label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-dark); font-size: 0.875rem; } .control-input, .control-select { width: 100%; background-color: var(--light-bg); border: 1px solid var(--border-color); color: var(--text-light); border-radius: 0.35rem; padding: 0.5rem 0.75rem; transition: all 0.2s ease; box-sizing: border-box; } .control-input:focus, .control-select:focus { outline: none; border-color: var(--primary-accent); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4); } .control-input:read-only { background-color: var(--medium-bg); opacity: 0.7; } .btn-like { display: flex; align-items: center; justify-content: center; padding: 0.6rem 1rem; border-radius: 0.375rem; font-weight: 600; font-size: 1rem; text-align: center; cursor: pointer; border: none; transition: background-color 0.2s; } .btn { transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .btn-primary { background-color: var(--primary-accent); color: white; } .btn-primary:hover:not(:disabled) { background-color: var(--primary-accent-hover); } .btn-secondary { background-color: var(--light-bg); color: var(--text-light); border-color: var(--border-color); } .btn-secondary:hover:not(:disabled) { background-color: #4a5568; } .btn:disabled { background-color: var(--border-color); cursor: not-allowed; opacity: 0.7; } .file-input-label { background-color: var(--border-color); color: var(--text-medium); } .file-input-label:hover { background-color: #6b7280; } .file-input-label.error { border: 1px solid var(--error-red); color: var(--error-red); } .parameter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-medium); cursor: pointer;} .checkbox-label input:disabled + span { opacity: 0.5; cursor: not-allowed; } .checkbox-label input:disabled { cursor: not-allowed; } /* * System-checkbox variants (Updated for shorter bars). * Set the container to relative so we can position the new lines inside it. */ .checkbox-label.system-cpu, .checkbox-label.system-gpu { position: relative; padding-left: 0.5rem; /* Standardized padding for both so they align perfectly */ } /* Create the custom vertical bars */ .checkbox-label.system-cpu::before, .checkbox-label.system-gpu::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 80%; border-radius: 2px; } .checkbox-label.system-cpu::before { background-color: #0d9488; /* Teal */ } .checkbox-label.system-gpu::before { background-color: #d97706; /* Amber */ } input[type="checkbox"] { accent-color: var(--primary-accent); transform: scale(1.1); vertical-align: middle; } .hidden { display: none !important; } /* Tab Styles */ .tab-buttons { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; } .tab-btn { flex: 1; padding: 0.75rem 0.5rem; background: none; border: none; color: var(--text-dark); font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 8px;} .tab-btn:hover { color: var(--text-light); } .tab-btn.active { color: var(--primary-accent); border-bottom-color: var(--primary-accent); } .tab-content-panels { flex-grow: 1; min-height: 0; position: relative; } .tab-content-panel { display: none; flex-direction: column; height: 100%; overflow-y: auto; padding-right: 8px; margin-right: -8px;} .tab-content-panel.active { display: flex; } .tab-content-panel::-webkit-scrollbar { width: 6px; } .tab-content-panel::-webkit-scrollbar-track { background: var(--dark-bg); } .tab-content-panel::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } .tab-content-panel::-webkit-scrollbar-thumb:hover { background: var(--light-bg); } #solutions-tab-content .control-group { flex-grow: 1; display: flex; flex-direction: column; margin-bottom: 0;} #solutions-table-container { flex-grow: 1; overflow-y: auto; background-color: var(--medium-bg); border-radius: 0.375rem; border: 1px solid var(--border-color); } /* led */ .led-indicator { width: 8px; height: 8px; border-radius: 50%; transition: background-color 0.3s ease; } .led-indicator.gray { background-color: var(--led-gray); } .led-indicator.green { background-color: var(--success-green); box-shadow: 0 0 5px var(--success-green);} .led-indicator.red { background-color: var(--error-red); box-shadow: 0 0 5px var(--error-red); } #peak-table-container { overflow-y: auto; background-color: var(--medium-bg); border-radius: 0.375rem; border: 1px solid var(--border-color); margin-top: 1rem; } .peak-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .peak-table th, .peak-table td { padding: 0.5rem; text-align: right; border-bottom: 1px solid var(--border-color); } .peak-table th { background-color: #2a3547; font-weight: 600; text-align: center; position: sticky; top: 0; } .peak-table input { width: 100%; background: transparent; border: none; color: var(--text-light); text-align: right; padding: 2px; border-radius: 2px; } .peak-table input:focus { background-color: var(--light-bg); outline: 1px solid var(--primary-accent); } .peak-table th, .peak-table td, .peak-table input { text-align: center; } .delete-peak-btn { background: none; border: none; color: var(--text-dark); cursor: pointer; font-weight: bold; } .delete-peak-btn:hover { color: var(--error-red); } /* Ka2-suspect peak rows: yellow tint + warning marker */ .peak-table tbody tr.ka2-suspect { background-color: rgba(234, 179, 8, 0.18); } .peak-table tbody tr.ka2-suspect input { color: #fde68a; } .peak-table tbody tr.ka2-suspect td:first-child::after { content: " ⚠"; color: #facc15; font-weight: bold; } .peak-table tbody tr.ka2-confirmed-real { background-color: transparent; } /* Highlight the row whose peak is currently being edited or clicked in the side table. The matching full-height vertical bar is drawn in the diffractogram by updateAllMarkers. */ .peak-table tbody tr.peak-row-selected { background-color: rgba(245, 158, 11, 0.18); outline: 1px solid rgba(245, 158, 11, 0.55); } .ka2-warning-banner { background-color: rgba(234, 179, 8, 0.15); border: 1px solid rgba(234, 179, 8, 0.5); color: #fde68a; padding: 6px 10px; border-radius: 4px; font-size: 0.78rem; margin: 6px 0 0 0; line-height: 1.4; } .ka2-warning-banner b { color: #fcd34d; } .solutions-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; } /* Provenance badges in the solutions table. A derived cell must never be mistaken for an independent hit, so both are colour-coded and carry a tooltip. Colours are chosen for contrast against --medium-bg: the obvious #2563eb blue only reaches 2.8:1 there and is unreadable. */ .sol-badge { font-size: 0.85em; cursor: help; } .sol-badge.swap { color: #d97706; } .sol-badge.mc { color: #60a5fa; } .sol-badge.sg { color: #34d399; } /* Adopted from a row that did not lead its table decisively. Same badge, deliberately drained of the confident green: the cell is fine, but the class it assumes was not established by the absences. */ .sol-badge.sg.sg-tied { color: #fbbf24; } .solutions-table th, .solutions-table td { padding: 0.5rem; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: middle;} .solutions-table th { background-color: #2a3547; font-weight: 600; position: sticky; top: 0;} .solutions-table th[data-sort] { cursor: pointer; } .solutions-table th[data-sort]:hover { background-color: var(--light-bg); } .solutions-table th.sort-asc::after, .solutions-table th.sort-desc::after { content: ''; display: inline-block; margin-left: 5px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; } .solutions-table th.sort-asc::after { border-bottom: 4px solid var(--text-light); } .solutions-table th.sort-desc::after { border-top: 4px solid var(--text-light); } .solutions-table td:nth-child(4), .solutions-table td:nth-child(5) { text-align: right; } /* Align Vol and M20 right */ .solutions-table tbody tr { cursor: pointer; transition: background-color 0.2s; } .solutions-table tbody tr:hover { background-color: var(--light-bg); } .solutions-table tbody tr.selected { background-color: var(--primary-accent); color: white;} .bottom-actions { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--light-bg); } #status-box { position: fixed; bottom: 20px; right: 20px; padding: 12px 20px; border-radius: 6px; color: white; font-size: 0.8rem; font-weight: 500; z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* - Force wrapping on long text - */ max-width: 400px; white-space: normal; word-wrap: break-word; line-height: 1.4; text-align: right; } #status-box.show { opacity: 1; visibility: visible; transform: translateY(0); } #status-box.success { background-color: var(--success-green); } #status-box.error { background-color: var(--error-red); } #status-box.info { background-color: var(--border-color); } /* Help Tooltip */ .help-tooltip-container { position: relative; display: inline-block; } .help-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background-color: var(--border-color); color: var(--text-light); border-radius: 50%; font-weight: bold; font-size: 1rem; cursor: help; transition: background-color 0.2s; } .help-icon:hover { background-color: #6b7280; } .tooltip-content { visibility: hidden; opacity: 0; width: 400px; background-color: var(--light-bg); color: var(--text-medium); text-align: left; border-radius: 0.375rem; padding: 1rem; position: absolute; z-index: 1001; top: -15px; left: 115%; margin-left: 10px; transition: opacity 0.3s; transition-delay: 2s; box-shadow: 0 4px 12px rgba(0,0,0,0.25); } .help-tooltip-container:hover .tooltip-content { visibility: visible; opacity: 1; transition-delay: 0s; } .help-tooltip-container::after { content: ''; position: absolute; left: 100%; width: 10px; top: 0; bottom: 0; } .tooltip-content::after { content: ""; position: absolute; top: 20px; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent var(--light-bg) transparent transparent; } .tooltip-content h4 { color: var(--text-light); font-size: 0.9rem; margin-top: 0; margin-bottom: 0.5rem; font-weight: 600; } .tooltip-content p { margin-top: 0; margin-bottom: 0.75rem; line-height: 1.4; } .tooltip-content p:last-child { margin-bottom: 0; } .tooltip-content hr { border: none; border-top: 1px solid var(--border-color); margin: 0.75rem 0; } #app-footer { position: fixed; /* Keeps it on the screen even if you scroll */ bottom: 8px; right: 15px; font-size: 0.6rem; color: var(--text-dark); z-index: 1001; } /* Slider */ .slider-group { display: grid; grid-template-columns: minmax(100px, auto) 1fr; gap: 12px; align-items: center; margin-bottom: 1rem; } .slider-group:last-child { margin-bottom: 0; } .slider-group > .control-label { margin-bottom: 0; font-size: 0.875rem; white-space: nowrap; } .slider-value-track { grid-column: 2; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; align-items: center; } .slider-value-track > * { grid-column: 1; grid-row: 1; } .slider-value-display { text-align: center; color: var(--text-dark); font-weight: 500; font-size: 0.8rem; pointer-events: none; } input[type="range"].custom-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: var(--medium-bg); border-radius: 6px; outline: none; padding: 0; margin: 0; } input[type="range"].custom-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; background: var(--primary-accent); border-radius: 50%; cursor: pointer; border: 2px solid var(--text-light); box-sizing: border-box; box-shadow: 0 2px 4px rgba(0,0,0,0.25); } input[type="range"].custom-slider::-moz-range-thumb { width: 15px; height: 15px; background: var(--primary-accent); border-radius: 50%; cursor: pointer; border: 2px solid var(--text-light); box-sizing: border-box; box-shadow: 0 2px 4px rgba(0,0,0,0.25); } input[type="range"].custom-slider:disabled { background: var(--light-bg); } input[type="range"].custom-slider:disabled::-webkit-slider-thumb { background: var(--border-color); } input[type="range"].custom-slider:disabled::-moz-range-thumb { background: var(--border-color); } /* GPU Params style */ #gpu-params-container { border-top: 1px solid var(--light-bg); padding-top: 1.5rem; margin-top: 1.5rem; } /* right click */ #swap-overlay { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.55); align-items: center; justify-content: center; } #swap-overlay.open { display: flex; } #swap-modal { background: var(--medium-bg); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: min(680px, 92vw); max-height: 86vh; display: flex; flex-direction: column; padding: 18px 20px; color: var(--text-light); } #swap-title { margin: 0 0 4px 0; font-size: 1.05rem; } #swap-sub { margin: 0 0 12px 0; font-size: 0.8rem; color: var(--text-dark); } /* min-height:0 is stated rather than relied on. A flex item defaults to min-height:auto, which refuses to shrink below its content -- but that automatic minimum does not apply to scroll containers, so overflow-y below already implies it and the table scrolled correctly even when the row list was capped at twelve. Writing it out means the scroll survives someone later changing the overflow. */ #swap-table-wrap { overflow-y: auto; flex: 1 1 auto; min-height: 0; border: 1px solid var(--border-color); border-radius: 6px; } #swap-table-wrap::-webkit-scrollbar { width: 6px; } #swap-table-wrap::-webkit-scrollbar-track { background: var(--dark-bg); } #swap-table-wrap::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } #swap-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--light-bg); } #swap-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } #swap-table th, #swap-table td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--border-color); } #swap-table th { position: sticky; top: 0; z-index: 1; background: var(--light-bg); color: var(--text-dark); font-weight: 500; } #swap-table tr:last-child td { border-bottom: none; } #swap-table input { width: 46px; background: var(--light-bg); border: 1px solid var(--border-color); color: var(--text-light); border-radius: 4px; padding: 3px 5px; text-align: center; font-size: 0.82rem; } #swap-table input.changed { border-color: #d97706; background: rgba(217,119,6,0.12); } #swap-table tr.unindexed td { color: var(--text-dark); font-style: italic; } #swap-msg { min-height: 18px; margin-top: 10px; font-size: 0.8rem; color: #f87171; } #swap-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; } /* Refine MC dialog. Mirrors the swap modal so the two right-click dialogs read as the same object; narrower because it holds three fields rather than a scrolling table. */ #mc-overlay { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.55); align-items: center; justify-content: center; } #mc-overlay.open { display: flex; } #mc-modal { background: var(--medium-bg); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: min(480px, 92vw); max-height: 86vh; display: flex; flex-direction: column; padding: 18px 20px; color: var(--text-light); } #mc-title { margin: 0 0 4px 0; font-size: 1.05rem; } #mc-sub { margin: 0 0 14px 0; font-size: 0.8rem; color: var(--text-dark); line-height: 1.45; } #mc-params { display: grid; grid-template-columns: 1fr 96px; gap: 12px 14px; align-items: center; } #mc-params label { display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; font-weight: 500; color: var(--text-medium); } #mc-params .mc-hint { font-weight: 400; font-size: 0.75rem; color: var(--text-dark); line-height: 1.35; } #mc-params input { width: 100%; box-sizing: border-box; background: var(--light-bg); border: 1px solid var(--border-color); color: var(--text-light); border-radius: 4px; padding: 5px 7px; text-align: center; font-size: 0.85rem; } #mc-params input:focus { outline: none; border-color: var(--primary-accent); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4); } #mc-params input.invalid { border-color: var(--error-red); background: rgba(220,38,38,0.12); } #mc-msg { min-height: 18px; margin-top: 12px; font-size: 0.8rem; color: #f87171; } #mc-msg.info { color: var(--text-dark); } #mc-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; } /* Space Group MC dialog. Same object as the two dialogs above -- same overlay, same panel, same button row -- but wide, because it holds a results table whose rows are selectable rather than editable. */ #sg-overlay { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.55); align-items: center; justify-content: center; } #sg-overlay.open { display: flex; } #sg-modal { background: var(--medium-bg); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: min(980px, 94vw); max-height: 88vh; display: flex; flex-direction: column; padding: 18px 20px; color: var(--text-light); } #sg-title { margin: 0 0 4px 0; font-size: 1.05rem; } #sg-sub { margin: 0 0 14px 0; font-size: 0.8rem; color: var(--text-dark); line-height: 1.45; } #sg-sub b { color: var(--text-medium); font-weight: 500; } /* Three fields on one row: the dialog is wide enough that the mc-params two-column stack would leave most of it empty. */ #sg-params { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-start; margin-bottom: 12px; } #sg-params label { display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; font-weight: 500; color: var(--text-medium); } #sg-params .sg-hint { font-weight: 400; font-size: 0.75rem; color: var(--text-dark); line-height: 1.35; } #sg-params input { width: 96px; box-sizing: border-box; background: var(--light-bg); border: 1px solid var(--border-color); color: var(--text-light); border-radius: 4px; padding: 5px 7px; text-align: center; font-size: 0.85rem; margin-top: 2px; } #sg-params input:focus { outline: none; border-color: var(--primary-accent); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4); } #sg-table-wrap { overflow-y: auto; flex: 1 1 auto; min-height: 140px; border: 1px solid var(--border-color); border-radius: 6px; } #sg-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } #sg-table th, #sg-table td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--border-color); white-space: nowrap; } #sg-table th { position: sticky; top: 0; z-index: 1; background: var(--light-bg); color: var(--text-dark); font-weight: 500; } #sg-table tr:last-child td { border-bottom: none; } /* Class symbol and member list read as text, not as numbers. */ #sg-table th:first-child, #sg-table td:first-child, #sg-table th:nth-child(2), #sg-table td.sg-groups { text-align: left; } #sg-table td.sg-groups { max-width: 300px; overflow: hidden; text-overflow: ellipsis; color: var(--text-medium); } #sg-table tbody tr { cursor: pointer; } #sg-table tbody tr:hover td { background: var(--light-bg); } #sg-table tbody tr.sg-sel td { background: rgba(26,115,232,0.28); color: var(--text-light); } /* Ruled out by a violation the impurity allowance does not cover: kept visible on purpose -- knowing WHICH group the data excludes is half the answer -- but pushed back so the surviving rows read first. */ #sg-table tbody tr.sg-ruled-out td { color: var(--text-dark); } #sg-table tbody tr.sg-bad td { color: var(--text-dark); font-style: italic; } /* Leading row on the log-odds score. Only a hint of emphasis: whether it is actually the answer depends on the margin, which #sg-msg states in words rather than leaving the highlight to imply. */ #sg-table tbody tr.sg-best td { font-weight: 600; } /* Still a stage-1 (least-squares only) result -- not yet given the full Monte-Carlo pass, so its score can still move. */ #sg-table tbody tr.sg-stage1 td.sg-score::after { content: ' \00b7'; opacity: 0.55; } #sg-table td.sg-score { font-variant-numeric: tabular-nums; } /* Sortable headers. The arrow marks the active column and its direction. The table defaults to Score, which is what ranks the hypotheses; every other column is one click away. */ #sg-table th[data-sort] { cursor: pointer; user-select: none; } #sg-table th[data-sort]:hover { color: var(--text-medium); } #sg-table th.sg-sorted { color: var(--text-light); } #sg-table th.sg-sorted::after { content: ' \25BC'; font-size: 0.7em; opacity: 0.8; } #sg-table th.sg-sorted.sg-asc::after { content: ' \25B2'; } #sg-msg { min-height: 18px; margin-top: 12px; font-size: 0.8rem; color: var(--text-dark); } #sg-msg.error { color: #f87171; } #sg-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; } #context-menu { display: none; position: absolute; z-index: 2000; background-color: var(--medium-bg); border: 1px solid var(--border-color); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); min-width: 150px; padding: 4px 0; } #context-menu div { padding: 8px 16px; cursor: pointer; font-size: 0.85rem; color: var(--text-light); transition: background-color 0.1s; } #context-menu div:hover { background-color: var(--primary-accent); color: white; } /* --- Utility classes (folded from repeated inline styles) --- */ .mb-5 { margin-bottom: 5px; } .full-width { width: 100%; } .flex-1 { flex: 1; } .axis-toggle { display: flex; align-items: center; gap: 0.3rem; } .axis-toggle-key { font-weight: 600; } .axis-select { font-size: 0.78rem; padding: 0.1rem 0.2rem; }