/* Full-bleed workspace band: collapsible editor rail + hero stage.
   Shared by the DSL tools (roadmap, tree, why).

   Page spatial system: every band (header, workspace, about, footer) shares
   one gutter and one max width, so edges align down the whole page. */
:root{
  --page-max: 1760px;
  --page-gutter: 24px;
}
.wrap{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}
.workspace{
  display: grid;
  grid-template-columns: 420px 26px minmax(0, 1fr);
  align-items: stretch;
  max-width: var(--page-max);
  margin: 28px auto 0;
  padding: 0 var(--page-gutter);
}
@media (prefers-reduced-motion: no-preference){
  .workspace{transition: grid-template-columns .28s cubic-bezier(.2,.8,.2,1)}
  .rail{transition: opacity .2s ease, visibility 0s linear .28s}
  .stage .preview svg{transition: width .28s cubic-bezier(.2,.8,.2,1)}
}
.workspace.collapsed{grid-template-columns: 0px 26px minmax(0, 1fr)}
.rail{
  min-width: 0; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); padding: 18px;
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.workspace.collapsed .rail{
  opacity: 0; visibility: hidden; padding-left: 0; padding-right: 0;
  border-color: transparent; box-shadow: none; pointer-events: none;
}
/* indent/outdent buttons for indented DSLs — fingers have no Tab key.
   Hidden wherever a keyboard is likely; shown for coarse pointers. */
.cm-indentbar{display: none}
@media (pointer: coarse){
  .cm-indentbar{display: flex; gap: 8px; margin: 0 0 8px}
  .cm-indentbar button{min-height: 44px; flex: 1 1 auto; font-family: inherit;
    font-size: 13px; color: var(--ink); background: none;
    border: 1px solid var(--border); border-radius: 6px}
  .cm-indentbar button:active{border-color: var(--accent); color: var(--accent-ink)}
}

.railtab{
  justify-self: center; align-self: stretch; width: 26px; margin: 8px 0;
  border: none; border-radius: 9px; background: none;
  color: var(--muted); cursor: pointer; font-size: 11px; padding: 0;
}
.railtab:hover{background: var(--card); color: var(--accent-ink); box-shadow: var(--shadow)}
.railtab:focus-visible{outline: 2px solid var(--accent); outline-offset: 2px}
.stage{
  min-width: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); padding: 18px;
}
.stage .preview{overflow: auto}
.stage .preview svg{display: block; width: 100%; height: auto}
.zoomctl{display: inline-flex; gap: 2px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden}
.zoomctl button{
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px;
}
.zoomctl button:hover{color: var(--accent-ink)}
.zoomctl button.on{color: var(--card); background: var(--accent)}
/* nothing on stage yet → the action row has nothing to act on */
.actions button:disabled, .actions select:disabled{opacity: .45; cursor: default}
.actions button:disabled:hover{border-color: var(--border); color: inherit}
/* section rhythm after the hero: reading column shares the page's left edge
   (a centred 65ch island under the full-bleed stage read as detached) */
.about{margin: 56px 0 0}
footer{margin: 48px 0 8px}
@media (max-width: 900px){
  .workspace{display: flex; flex-direction: column; gap: 16px; margin-top: 20px}
  .rail{width: auto; max-height: none; overflow: visible; opacity: 1 !important;
    padding: 18px !important; border-color: var(--border) !important}
  /* indent/outdent buttons for indented DSLs — fingers have no Tab key.
   Hidden wherever a keyboard is likely; shown for coarse pointers. */
.cm-indentbar{display: none}
@media (pointer: coarse){
  .cm-indentbar{display: flex; gap: 8px; margin: 0 0 8px}
  .cm-indentbar button{min-height: 44px; flex: 1 1 auto; font-family: inherit;
    font-size: 13px; color: var(--ink); background: none;
    border: 1px solid var(--border); border-radius: 6px}
  .cm-indentbar button:active{border-color: var(--accent); color: var(--accent-ink)}
}

.railtab{display: none}
}

/* Fingers get full-size controls; mouse pointers keep the compact look. */
@media (pointer: coarse){
  .chip, .btn, .viewtoggle button{min-height: 44px; display: inline-flex; align-items: center}
  .zoomctl button{padding: 13px 15px; font-size: 13px}
  .eip-pop button{padding: 12px 12px}
}
/* phones are for viewing and zooming: the zoom control gets the full row */
@media (max-width: 900px) and (pointer: coarse){
  .zoomctl{display: flex; width: 100%}
  .zoomctl button{flex: 1 1 auto}
}

/* edit-in-place overlay */
[data-edit]{cursor: text}
[data-edit]:hover{text-decoration: underline; text-decoration-style: dotted}
.eip-input{
  position: fixed; z-index: 60;
  font: 600 13px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--ink); background: var(--card);
  border: 1.5px solid var(--accent); border-radius: 6px;
  padding: 4px 8px; box-shadow: var(--shadow);
}
.eip-input:focus{outline: none}
.eip-input.invalid{border-color: var(--err); animation: eip-shake .3s}
@keyframes eip-shake{
  20%{transform: translateX(-3px)} 40%{transform: translateX(3px)}
  60%{transform: translateX(-2px)} 80%{transform: translateX(2px)}
}
@media (prefers-reduced-motion: reduce){
  .eip-input.invalid{animation: none}
}

.eip-pop{
  position: fixed; z-index: 60; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); padding: 4px; min-width: 130px;
}
.eip-pop button{
  border: none; background: none; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--ink);
  padding: 6px 10px; border-radius: 5px;
}
.eip-pop button:hover{background: var(--bg); color: var(--accent-ink)}
.eip-pop button.on{color: var(--accent-ink); font-weight: 600}
.eip-sep{height: 1px; background: var(--border); margin: 4px 2px}
.eip-pop button.danger{color: var(--err)}
.eip-pop button.danger:hover{background: color-mix(in srgb, var(--err) 10%, transparent); color: var(--err)}
[data-edit]:not(text):hover{opacity: .8}