/* First UI prototype. Execution, renderers and source limits remain independent. */
:root { --accent: #195B7B; }
header { grid-template-columns: auto minmax(220px, 1fr) minmax(120px, 320px) auto; gap: 12px; }
.header-navigation { display: flex; align-items: center; gap: 12px; position: relative; }
.main-navigation { display: flex; gap: 4px; }
.header-navigation button { font-size: 12px; padding: 5px 12px; min-height: 30px; }
.main-navigation button[aria-pressed="true"], .mode-options button[aria-pressed="true"] { background: #195B7B; border-color: #195B7B; color: white; }
.brand-mark, .examples-panel h2 { background: #195B7B; }
#materials { display: inline-flex; align-items: center; min-height: 30px; border: 1px solid var(--border); border-radius: 7px; padding: 5px 12px; background: #f8fbff; color: #233c5e; font: 600 12px system-ui, sans-serif; text-decoration: none; }
.environment-description h3 { margin: 12px 0 4px; font-size: .82rem; line-height: 1.4; }
.mode-options[hidden] { display: none; }
.mode-switch .editor-actions { gap: 8px; }
.mode-switch #toggle-examples { margin-left: 0; }
.editor-actions #run, .editor-actions #stop { width: 110px; height: 34px; min-height: 34px; padding: 0 10px; border-radius: 5px; flex-shrink: 0; }
#run { background: #218447; border-color: #218447; }
#run:hover:enabled { background: #196c39; }
#stop { background: #B93434; border-color: #B93434; color: white; }
#stop:hover:enabled { background: #a52929; border-color: #a52929; }
.editor-inputs { background: #f4f8ff; color: #233c5e; flex: 0 0 auto; min-width: 0; max-height: 45%; overflow: auto; border-top: 1px solid var(--border); }
.editor-inputs > .input-mode-row { padding: 5px 10px; justify-content: flex-start; }
.editor-inputs .input-mode-row label { display: inline; }
.editor-inputs #input-mode { width: min(230px, 70%); flex: 0 1 230px; }
.editor-inputs .input-options { max-height: none; padding: 0 10px 5px; border: 0; }
.editor-inputs #input-form { border: 0; padding-top: 0; }
.editor-inputs #input-form label { display: none; }
.editor-inputs #prepared-input { width: 100%; }
#maximize-plot { width: 27px; height: 25px; padding: 0; font-size: 20px; line-height: 1; }
.examples-search-box { padding: 7px 10px; }
#examples-search { padding: 5px 7px; font-size: 12px; }
#examples-results { margin: 3px 0 0; }
.examples-search-box label { margin-bottom: 3px; font-size: 11px; }
.examples-panel h2 { padding: 7px 10px; }
.examples-panel .examples-help { display: none; }
#examples-status { margin: 5px 10px; font-size: 11px; line-height: 1.4; }
.code-state, .selected-example { margin: 3px 10px; font-size: 11px; }
.example-button { padding: 6px 6px 6px 26px; }
.example-button::before { top: 8px; }
.example-button::after { top: 11px; }
.example-button small { font-size: 10px; line-height: 1.3; }
#quick-examples { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; flex-shrink: 0; }
#quick-examples[hidden] { display: none; }
.quick-example { position: relative; width: 60px; height: 50px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: #edf4f8; flex-shrink: 0; }
.quick-example:hover, .quick-example:focus-visible { border-color: #195B7B; background: #e0edf4; }
.quick-example svg { width: 100%; height: 100%; fill: none; stroke: #195B7B; stroke-width: 1.8; stroke-linejoin: round; }
.quick-example .thumbnail-axes { stroke: #a3b6c2; stroke-width: 1; }
.quick-tooltip { display: none; position: absolute; top: 100%; left: 0; z-index: 8; padding: 3px 6px; font-size: 11px; color: white; background: #195B7B; border-radius: 3px; white-space: nowrap; }
.quick-example:hover .quick-tooltip, .quick-example:focus .quick-tooltip { display: block; }
#snippet-status { font-size: 11px; margin: 0 10px 4px; color: #52677f; }
#snippet-status:empty { display: none; }
/* Reserve space only while the existing examples drawer is open. Keep main's
   real bounds aligned with its panels so the existing pointer resizer is exact. */
.workspace { --examples-width: 220px; --examples-offset: 0px; }
.workspace:not(.sidebar-collapsed) { --examples-offset: calc(var(--examples-width) + 8px); }
.workspace main { margin-left: var(--examples-offset); }
.workspace #examples-panel { width: var(--examples-width); box-shadow: 0 2px 8px #152e5018; }
.workspace .console-panel, .workspace #console-resizer { margin-left: calc(-1 * var(--examples-offset)); width: calc(100% + var(--examples-offset)); }
body.plot-maximized main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto 8px var(--console-height); }
body.plot-maximized .editor-panel { display: contents; }
body.plot-maximized .editor-panel > :not(.editor-inputs) { display: none; }
body.plot-maximized .editor-inputs { grid-column: 1; grid-row: 2; max-height: 170px; border-radius: 4px; }
body.plot-maximized .editor-inputs > .input-mode-row { display: none; }
body.plot-maximized #plot-panel { grid-column: 1; grid-row: 1; }
body.plot-maximized #panel-resizer { display: none; }
body.plot-maximized #console-resizer { grid-row: 3; }
body.plot-maximized .console-panel { grid-column: 1; grid-row: 4; }
@media (max-width: 1100px) {
  header { gap: 8px; grid-template-columns: auto minmax(200px, 1fr) auto; }
  .toolbar { grid-column: 1 / -1; grid-row: 2; }
  .environment-info { grid-column: 3; grid-row: 1; }
}
@media (max-width: 760px) {
  .workspace { --examples-width: min(200px, 36vw); }
  header { grid-template-columns: minmax(0, 1fr) auto; }
  .header-navigation { grid-row: 2; grid-column: 1 / -1; }
  .toolbar { grid-row: 3; }
  .environment-info { grid-column: 2; }
  .mode-switch .editor-actions { justify-content: flex-start; }
  .mode-options { padding-left: 0; border: 0; }
  .editor-actions #run, .editor-actions #stop { width: 110px; }
}
/* Keep the approved header footprint after removing the temporary badge. */
#environment-info { width: 256px; }
#environment-info > summary { min-height: 30px; justify-content: space-between; }
@media (max-width: 760px) {
  #environment-info { width: 128px; }
  #environment-info > summary { padding: 2px 8px; }
  #environment-info > summary > span { display: inline; flex-basis: auto; line-height: 12px; }
}