/* All values come from the design.css variables (config/design.json). No colors or sizes are defined here. */
* { box-sizing: border-box; margin: 0; }
body { background: var(--color-bg); color: var(--color-text); font: var(--font-size) var(--font-family); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; text-align: left; }

.app { display: grid; height: 100vh; gap: var(--space-2); padding: var(--space-2); grid-template-columns: var(--layout-left) minmax(0, 1fr); }
.box { background: var(--color-surface); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-l); padding: var(--space-3); min-height: 0; overflow: auto; }
.top { display: none; align-items: center; gap: var(--space-2); }
.muted { color: var(--color-muted); font-size: var(--font-size-s); }
.left { display: flex; flex-direction: column; gap: var(--space-1); }
.item { padding: calc(var(--space-1) * 1.5) var(--space-2); border-radius: var(--radius-s); width: 100%; }
.item:hover, .item.on { background: var(--color-surface2); }
.left .grow { flex: 1; }
.page { width: 100%; height: 100%; padding: 0; overflow: hidden; }
.app:not(:has(> .left)) { grid-template-columns: minmax(0, 1fr); } .app:not(:has(> .left)) .top { display: none; }  /* one page: no menu column, no menu button */

@media (max-width: 900px) {
  .app { display: flex; flex-direction: column; padding-bottom: 0; }
  .top { display: flex; }
  .page { flex: 1; }
  .left { position: fixed; inset: 0 25% 0 0; z-index: 5; transform: translateX(-102%); transition: transform var(--motion-fast); border-radius: 0 var(--radius-l) var(--radius-l) 0; }
  .menu-open .left { transform: none; }
  .top .menu { padding: var(--space-1) var(--space-2); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-s); }
}