/* N-Body workspace, aligned with the OpenCAE viewer and shared site themes. */
html, body { height: 100%; }
body.site-legacy { overflow: hidden; font: 13px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; }
html body .site-header { overflow: visible; }
html body.site-legacy .site-legacy-workspace { height: calc(100dvh - var(--site-header-height)); }
.nbody-app { display: flex; flex-direction: column; color: var(--portfolio-text); background: var(--portfolio-bg); }
.nbody-appbar { flex: none; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 18px; border-bottom: 1px solid var(--portfolio-line); background: var(--portfolio-elevated); }
.nbody-appbar > div { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.nbody-appbar strong { font-size: 13px; font-weight: 650; white-space: nowrap; }
.nbody-appbar span { color: var(--portfolio-muted); font-size: 11px; white-space: nowrap; }
.nbody-workspace { min-height: 0; flex: 1; display: grid; grid-template-columns: 64px 360px minmax(0, 1fr); transition: grid-template-columns .18s ease; }
.nbody-workspace:not(.inspector-open) { grid-template-columns: 64px 0 minmax(0, 1fr); }
.nbody-rail { z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 7px; border-right: 1px solid var(--portfolio-line); background: var(--portfolio-elevated); }
.nbody-rail button { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 9px; background: transparent; color: var(--portfolio-muted); font-size: 19px; cursor: pointer; }
.nbody-rail button:hover, .nbody-rail button.active { background: var(--portfolio-accent-soft); color: var(--portfolio-accent); }
.nbody-rail button.active::before { content: ''; position: absolute; left: -7px; width: 2px; height: 24px; border-radius: 3px; background: var(--portfolio-accent); }
.nbody-inspector { min-width: 0; overflow: hidden; border-right: 1px solid var(--portfolio-line); background: var(--portfolio-panel); }
#off-canvas-right, #off-canvas-right.active { position: relative; left: auto; right: auto; width: auto; height: auto; transition: none; }
.nbody-close-panel { position: absolute; z-index: 6; top: 17px; right: 16px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--portfolio-muted); cursor: pointer; }
.nbody-close-panel:hover { background: var(--portfolio-accent-soft); color: var(--portfolio-accent); }
.nbody-workspace:not(.inspector-open) .nbody-inspector { border-right: 0; }
.nbody-inspector-scroll { height: 100%; overflow: auto; scrollbar-color: var(--portfolio-line-strong) transparent; }
.nbody-panels { --bs-accordion-bg: transparent; --bs-accordion-border-color: transparent; }
.nbody-panel { display: none; min-width: 0; background: transparent !important; }
.nbody-panel.active { display: block; }
.nbody-panel .accordion-header { position: sticky; top: 0; z-index: 4; margin: 0; border-bottom: 1px solid var(--portfolio-line); background: var(--portfolio-panel) !important; }
.nbody-panel .accordion-button { min-height: 67px; padding: 14px 18px; border: 0; background: var(--portfolio-panel) !important; color: var(--portfolio-text) !important; box-shadow: none !important; cursor: default; pointer-events: none; }
.nbody-panel .accordion-button::after { display: none; }
.nbody-panel .accordion-button > div { display: flex !important; align-items: center; gap: 5px; }
.nbody-panel .accordion-button i { color: var(--portfolio-accent); font-size: 16px; }
.nbody-panel .accordion-button strong { font-size: 18px; font-weight: 590; }
.nbody-panel .accordion-collapse, .nbody-panel .accordion-collapse:not(.show) { display: block !important; }
.nbody-panel .accordion-body { padding: 18px; }
.nbody-panel .form-group, .nbody-panel .border.rounded-2 { min-width: 0; }
.nbody-panel .border.rounded-2 { border: 1px solid var(--portfolio-line) !important; border-radius: 8px !important; background: var(--portfolio-elevated) !important; padding: 12px !important; margin-top: 14px !important; }
.nbody-panel .form-label, .nbody-panel label { color: var(--portfolio-soft); font-size: 11px; }
.nbody-panel .form-control, .nbody-panel .form-select, .nbody-panel .input-group-text { min-height: 34px; font-size: 12px; }
.nbody-panel .form-control:not([type="color"]), .nbody-panel .form-select, .nbody-panel .input-group-text {
  background-color: var(--portfolio-input) !important;
  color: var(--portfolio-text) !important;
  border-color: var(--portfolio-line-strong) !important;
  -webkit-text-fill-color: var(--portfolio-text);
}
.nbody-panel .form-control:focus, .nbody-panel .form-select:focus { border-color: var(--portfolio-accent) !important; box-shadow: 0 0 0 3px var(--portfolio-accent-soft) !important; }
.nbody-panel .form-control::placeholder { color: var(--portfolio-muted); -webkit-text-fill-color: var(--portfolio-muted); }
.nbody-panel .form-control:disabled, .nbody-panel .form-select:disabled { opacity: .65; }
.nbody-panel .form-select option { background: var(--portfolio-input); color: var(--portfolio-text); }
.nbody-panel .form-control:-webkit-autofill { box-shadow: 0 0 0 100px var(--portfolio-input) inset !important; -webkit-text-fill-color: var(--portfolio-text) !important; }
html[data-theme="light"] .nbody-panel .form-select, html[data-theme="white"] .nbody-panel .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2329272d' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}
.datepicker.dropdown-menu { background: var(--portfolio-input); color: var(--portfolio-text); border-color: var(--portfolio-line-strong); }
.datepicker table tr td.day:hover, .datepicker table tr td.active, .datepicker table tr td.active:hover { background: var(--portfolio-accent-soft); color: var(--portfolio-accent); }
html[data-theme="light"] .nbody-panel input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="white"] .nbody-panel input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.nbody-panel .input-group-text { padding-inline: 8px; }
.nbody-panel .btn { font-size: 12px; }
.nbody-panel .row { row-gap: 10px; }
.nbody-panel .alert { font-size: 11px; }
.nbody-panel .accordion-body > .form-group:first-child { margin-top: 0 !important; }
.nbody-panel hr { border-color: var(--portfolio-line); }
.nbody-viewport { position: relative; min-width: 0; overflow: hidden; background: var(--portfolio-bg); }
#graphic-div { position: absolute; inset: 0; }
#graphic-canvas, #text-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#graphic-canvas { cursor: grab; touch-action: none; }
#graphic-canvas:active { cursor: grabbing; }
#text-canvas { pointer-events: none; }
.nbody-viewbar { position: absolute; z-index: 5; top: 14px; left: 18px; display: flex; align-items: center; gap: 2px; height: 41px; padding: 5px; border: 1px solid var(--portfolio-line-strong); border-radius: 9px; background: var(--portfolio-panel); box-shadow: 0 5px 18px #0003; }
.nbody-viewbar button { display: grid; place-items: center; width: 32px; height: 30px; min-height: 0; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--portfolio-muted); font-size: 12px; font-weight: 650; cursor: pointer; }
.nbody-viewbar button:hover, .nbody-viewbar button.btn-secondary { background: var(--portfolio-accent-soft); color: var(--portfolio-accent); }
.nbody-viewbar .viewbar-separator { width: 1px; height: 19px; margin: 0 3px; background: var(--portfolio-line-strong); }
.nbody-view-cube { position: absolute; z-index: 6; top: 13px; right: 18px; width: 118px; height: 118px; cursor: pointer; touch-action: none; }
.nbody-view-hint { position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%); padding: 6px 10px; border: 1px solid var(--portfolio-line); border-radius: 6px; background: var(--portfolio-panel); color: var(--portfolio-muted); font-size: 10px; white-space: nowrap; pointer-events: none; }
.site-imprint { left: auto !important; right: 14px; bottom: 11px; z-index: 8; }
.nbody-panel #simulation-start-btn { min-width: 110px; }
.nbody-panel #simulation-progress { transition: width .2s ease; }
.nbody-playback { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--portfolio-line); }
.nbody-playback-heading, .nbody-playback-time, .nbody-playback-range { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nbody-playback-heading { margin-bottom: 16px; }
.nbody-playback-heading > span { color: var(--portfolio-accent); font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.nbody-playback-heading small, .nbody-playback-range, .nbody-playback p { color: var(--portfolio-muted); font-size: 10px; }
.nbody-playback-heading small { text-align: right; }
.nbody-playback-time { color: var(--portfolio-soft); font-size: 11px; }
.nbody-playback-time output, .nbody-playback-speed output { color: var(--portfolio-text); font-variant-numeric: tabular-nums; }
#playback-slider { display: block; width: 100%; margin: 12px 0 3px; accent-color: var(--portfolio-accent); }
.nbody-playback-media { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 16px 0 12px; }
.nbody-playback-media button { display: grid; place-items: center; width: 100%; min-width: 0; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--portfolio-soft); font-size: 14px; cursor: pointer; }
.nbody-playback-media button:hover:not(:disabled), .nbody-playback-media button.active { border-color: var(--portfolio-line-strong); background: var(--portfolio-accent-soft); color: var(--portfolio-accent); }
.nbody-playback button:disabled, .nbody-playback input:disabled { opacity: .42; cursor: not-allowed; }
.nbody-playback-speed { display: grid; grid-template-columns: 38px minmax(0, 1fr) 42px; align-items: center; gap: 8px; }
.nbody-playback-speed label { margin: 0; color: var(--portfolio-soft); font-size: 11px; }
.nbody-playback-speed input { min-width: 0; accent-color: var(--portfolio-accent); }
.nbody-playback-speed output { text-align: right; font-size: 10px; }
.nbody-playback p { margin: 13px 0 0; line-height: 1.5; }
.nbody-experiment-card { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; padding: 14px; border: 1px solid var(--portfolio-line); border-radius: 9px; background: var(--portfolio-elevated); }
.nbody-experiment-card[hidden], #experiment-duel-options[hidden], #experiment-chaos-options[hidden] { display: none !important; }
.nbody-experiment-card h3 { margin: 0; color: var(--portfolio-text); font-size: 14px; font-weight: 650; }
.nbody-experiment-card p, .nbody-experiment-card small { margin: 0; color: var(--portfolio-muted); font-size: 11px; line-height: 1.45; }
.nbody-experiment-card label { margin: 5px 0 -4px; }
.nbody-experiment-card .btn { align-self: stretch; margin-top: 5px; }
#experiment-duel-options, #experiment-chaos-options { display: flex; flex-direction: column; gap: 8px; }
.nbody-experiment-legend { display: flex; gap: 17px; color: var(--portfolio-soft); font-size: 10px; }
.nbody-experiment-legend span { display: inline-flex; align-items: center; gap: 5px; }
.nbody-experiment-legend i { width: 12px; height: 3px; border-radius: 3px; background: var(--portfolio-accent); }
.nbody-experiment-legend span + span i { background: #ed78c4; }
#experiment-chart { display: block; width: 100%; height: auto; border: 1px solid var(--portfolio-line); border-radius: 5px; background: var(--portfolio-panel); cursor: crosshair; touch-action: none; }
#experiment-distance { color: var(--portfolio-text); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 800px) {
  .nbody-workspace { grid-template-columns: 54px min(320px, 46vw) minmax(0, 1fr); }
  .nbody-workspace:not(.inspector-open) { grid-template-columns: 54px 0 minmax(0, 1fr); }
  .nbody-rail { padding-inline: 4px; }
  .nbody-rail button { width: 44px; }
  .nbody-appbar-hint { display: none; }
  .nbody-view-cube { width: 98px; height: 98px; }
}
@media (max-width: 600px) {
  .nbody-workspace, .nbody-workspace:not(.inspector-open) { position: relative; grid-template-columns: 54px 0 minmax(0, 1fr); }
  .nbody-workspace.inspector-open #off-canvas-right { position: absolute; z-index: 7; left: 54px; right: auto; top: 0; bottom: 0; width: min(360px, calc(100% - 54px)); box-shadow: 12px 0 24px #0005; }
  .nbody-workspace:not(.inspector-open) .nbody-inspector { display: none; }
  .nbody-viewport { grid-column: 3; }
  .nbody-viewbar { left: 10px; top: 10px; }
  .nbody-view-cube { right: 8px; top: 65px; }
  .nbody-view-hint { display: none; }
  .site-imprint { bottom: 5px; right: 5px; }
}