/* Workspace geometry only: retain the existing palette and CodeMirror theme. */
:root { --console-height: 180px; }
body { max-width: none; width: 100%; height: 100dvh; min-height: 400px; padding: 8px; gap: 6px; overflow: hidden; }
body[data-mode="math"] { height: 100dvh; }
header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding-bottom: 3px; }
h1 { font-size: 17px; letter-spacing: -.025em; }
.brand { gap: 8px; }
.brand-mark { flex-basis: 28px; height: 28px; border-radius: 6px; font-size: 14px; }
.author { font-size: 11px; }
.toolbar { gap: 10px; }
#toggle-examples { padding: 5px 8px; font-size: 11px; }
.interpreter-status { font-size: 11px; }
.environment-info summary { padding: 5px 8px; font-size: 11px; }
.test-badge { font-size: 10px; padding: 2px 5px; }
.mode-switch { flex-wrap: nowrap; gap: 5px; }
.mode-switch > button { padding: 5px 14px; font-size: 12px; }
.mode-switch .editor-actions { display: flex; flex-wrap: nowrap; flex-basis: auto; gap: 5px; margin-left: 0; }
.mode-options { display: flex; align-items: center; gap: 4px; border-left: 1px solid var(--border); padding-left: 12px; margin-left: 8px; }
.mode-options button { padding: 5px 12px; min-height: 28px; font-size: 12px; }
.mode-switch #toggle-examples { margin-left: auto; min-height: 28px; font-size: 12px; }
.editor-actions button { min-height: 28px; padding: 5px 10px; font-size: 12px; }
.workspace, .workspace.sidebar-collapsed { position: relative; display: block; flex: 1; min-height: 0; }
main, body[data-mode="math"] main { height: 100%; display: grid; min-width: 0; min-height: 0; grid-template-columns: minmax(0, var(--editor-width, 44fr)) 8px minmax(0, var(--plot-width, 56fr)); grid-template-rows: minmax(0, 1fr) 8px var(--console-height); gap: 0; }
.panel, body[data-mode] .panel { height: 100%; border-radius: 7px; }
.editor-panel, body[data-mode="math"] .editor-panel { grid-column: 1; grid-row: 1; }
body[data-mode="python"] .editor-panel { grid-column: 1 / -1; }
.plot-panel { grid-column: 3; grid-row: 1; }
.console-panel, body[data-mode="math"] .console-panel { grid-column: 1 / -1; grid-row: 3; }
.panel-heading, .plot-panel .panel-heading, .editor-heading { padding: 5px 10px; gap: 8px; min-height: 29px; }
.panel-heading label, .plot-panel .panel-heading strong { font-size: 12px; }
.editor-panel .panel-heading { padding-left: 8px; }
.document-info { padding: 3px 10px; font-size: 11px; line-height: 16px; }
#document-name { display: inline; }
#file-status:not(:empty) { display: inline; margin: 0 0 0 10px; }
.editor-footer { padding: 3px 10px; font-size: 11px; }
.plot-card { padding: 8px 0; }
.plot-results { scrollbar-gutter: stable; }
.plot-card h3 { padding: 0 12px; font-size: 12px; }
.plot-legend { padding: 6px 12px 0; gap: 5px 14px; }
.plot-chart { width: 100%; height: auto; }
.plot-note { margin: 4px 0; padding: 0 12px; }
.plot-details { margin: 2px 10px; color: var(--muted); font-size: 11px; line-height: 17px; }
.plot-details summary { width: fit-content; cursor: pointer; padding: 1px 0; }
.plot-details .plot-note { padding: 0; }
.plot-view-status:empty { display: none; }
.plot-data-warning, .plot-domain-note { margin: 3px 10px; color: #794207; font-size: 11px; line-height: 16px; }
.plot-data-warning[hidden], .plot-domain-note[hidden] { display: none; }
#plot-status { padding: 0 10px; margin: 4px 0 6px; font-size: 11px; }
.examples-panel, body[data-mode="math"] .examples-panel { position: absolute; display: flex; z-index: 5; width: min(270px, 100%); height: auto; top: 0; bottom: calc(var(--console-height) + 8px); left: 0; box-shadow: 5px 5px 18px #152e5030; }
.examples-panel[hidden], body[data-mode="math"] .examples-panel[hidden] { display: none; }
.examples-panel h2 { padding: 10px 12px; font-size: 12px; }
#console-resizer { grid-column: 1 / -1; grid-row: 2; position: relative; cursor: row-resize; touch-action: none; }
#console-resizer::before { content: ''; position: absolute; left: calc(50% - 24px); top: 3px; width: 48px; height: 2px; background: #8ca7c3; border-radius: 2px; }
#console-resizer:hover::before, #console-resizer:focus::before { background: var(--accent); }
#console-resizer:focus-visible { outline-offset: -2px; }
body.resizing-console { cursor: row-resize; user-select: none; }
#panel-resizer { position: relative; grid-column: 2; grid-row: 1; cursor: col-resize; touch-action: none; }
#panel-resizer::before { content: ''; position: absolute; top: calc(50% - 24px); left: 3px; width: 2px; height: 48px; background: #8ca7c3; border-radius: 2px; }
#panel-resizer:hover::before, #panel-resizer:focus::before { background: var(--accent); }
#panel-resizer:focus-visible { outline-offset: -2px; }
body[data-mode="python"] #panel-resizer { display: none; }
body.resizing-panels { cursor: col-resize; user-select: none; }
.plot-titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0 10px; }
.plot-titlebar h3 { padding: 0; margin-right: auto; }
.plot-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.plot-tools button, .plot-settings summary { padding: 3px 8px; min-height: 25px; font: 600 12px system-ui, sans-serif; border: 1px solid var(--border); border-radius: 5px; background: #f8fbff; color: #233c5e; cursor: pointer; }
.plot-settings { position: relative; }
.plot-settings summary { list-style: none; }
.plot-settings summary::after { content: ' ▾'; }
.plot-settings[open] { z-index: 3; }
.plot-ranges { position: absolute; right: 0; top: calc(100% + 4px); width: 280px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; background: white; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 5px 18px #152e5030; }
.plot-ranges label { font-size: 12px; min-width: 0; }
.plot-ranges input { display: block; width: 100%; min-width: 0; margin-top: 4px; padding: 5px 6px; border: 1px solid #a8bfdc; border-radius: 4px; font: 12px Consolas, monospace; }
.plot-ranges p, .plot-ranges button { grid-column: 1 / -1; margin: 0; }
.plot-ranges p { font-size: 11px; line-height: 1.4; }
.plot-range-error { color: #b42318; }
.plot-range-error:empty { display: none; }
.legend-toggle { padding: 2px 5px; border: 1px solid transparent; border-radius: 4px; background: transparent; font: inherit; color: #233c5e; }
.legend-toggle:hover { background: #edf3fc; }
.legend-toggle::before { content: ''; display: inline-block; width: 22px; border-top: 3px solid #1768b7; margin: 0 7px 3px 0; }
.legend-toggle[aria-pressed="false"] { opacity: .55; text-decoration: line-through; border-color: var(--border); }
.plot-view-summary { align-self: center; }
.plot-view-status { min-height: 16px; margin: 2px 10px; color: #794207; font-size: 11px; line-height: 16px; }
.plot-chart { cursor: grab; touch-action: pan-y; }
.plot-chart.is-panning { cursor: grabbing; }
.plot-point { fill: none; stroke-width: 3; }
.console-heading { flex-wrap: nowrap; }
.console-tools { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: auto; }
.console-tools button { padding: 3px 8px; min-height: 25px; font-size: 11px; white-space: nowrap; }
.input-mode-row { flex-wrap: nowrap; gap: 6px; }
.input-mode-row label { white-space: nowrap; font-size: 11px; }
#input-mode { flex: none; width: 160px; padding: 3px 5px; font-size: 11px; }
#console-action-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; letter-spacing: normal; }
.input-options { padding: 4px 10px; max-height: 45%; }
.input-options:has(#prepared-input-panel[hidden]) { display: none; }
#input-mode-hint { display: none; }
#prepared-input-panel { margin: 0; }
#prepared-input-panel > label { display: inline; font-size: 11px; }
#prepared-input { height: 48px; min-height: 32px; font-size: 12px; line-height: 17px; padding: 3px 6px; }
#prepared-input-help { font-size: 10px; }
.input-data-actions { margin-top: 3px; }
#load-input-file { padding: 3px 6px; font-size: 11px; }
#output { padding: 7px 10px; font: 13px/19px Consolas, 'Courier New', monospace; white-space: pre; overflow-wrap: normal; word-break: normal; tab-size: 4; }
#output:empty::before { content: 'Wyniki programu pojawią się tutaj.'; color: #a5b5c6; }
.error-panel { padding: 5px 10px; font-size: 12px; max-height: 65px; flex-shrink: 0; }
.error-panel p { margin-top: 2px; }
#input-form { display: none; padding: 5px 10px; gap: 10px; align-items: center; }
body:has(#status[data-state="waiting"]) #input-form { display: flex; }
body:has(#status[data-state="waiting"]) .input-options { display: none; }
#input-form label { margin: 0; font-size: 12px; white-space: nowrap; }
.input-row { flex: 1; min-width: 0; gap: 6px; }
#input { padding: 4px 7px; font-size: 13px; line-height: 18px; }
#send { padding: 4px 14px; font-size: 12px; }
.input-hint { display: none; }
@media (max-width: 760px) {
  body { padding: 6px; min-height: 400px; }
  header { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .toolbar { grid-column: 1 / -1; grid-row: 2; }
  .environment-info { grid-column: 2; grid-row: 1; }
  .environment-info summary { flex-wrap: nowrap; max-width: none; font-size: 10px; }
  .environment-info summary > span:last-of-type { display: none; }
  .environment-info summary::after { position: static; }
  .author { display: none; }
  .mode-switch { flex-wrap: wrap; }
  .mode-options { margin-left: 0; padding-left: 8px; }
  .mode-switch .editor-actions { flex: 1 0 auto; justify-content: flex-end; gap: 4px; }
  .editor-actions button { padding: 4px 6px; font-size: 11px; min-height: 27px; }
  body[data-mode="math"] main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) 8px var(--console-height); }
  body[data-mode="math"] .editor-panel { grid-column: 1; grid-row: 1; }
  body[data-mode="math"] .plot-panel { grid-column: 1; grid-row: 2; }
  #panel-resizer { display: none; }
  body[data-mode="math"] #console-resizer { grid-row: 3; }
  body[data-mode="math"] .console-panel { grid-column: 1; grid-row: 4; }
  .console-tools { gap: 4px; }
  .input-mode-row label, #console-action-status { display: none; }
  #input-mode { width: 118px; }
  .console-tools button { padding: 3px 5px; font-size: 10px; }
  #input-form { gap: 6px; padding: 4px 6px; }
  #input-form label { font-size: 11px; }
  #send { padding: 4px 8px; }
  .plot-tick { font-size: 12px; }
  .plot-axis-label { font-size: 14px; }
}
@media (max-width: 520px) {
  .mode-switch .editor-actions { flex: 1 0 100%; justify-content: flex-start; }
}