/* Toolbox — minimal shell foundation.
   Placeholder visual identity: colors/typography here are not a locked
   brand decision, only enough to have a working, canvas-first shell. */

:root {
  --bg: #f4f0e8;
  --panel: #fffaf0;
  --ink: #1a1a1a;
  --ink-soft: #7a7468;
  --line: #d9d2c2;
  --accent: #c14a2b;

  --app-bar-height: 48px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* Compact, fixed app bar — chrome stays out of the canvas's way. */
.app-bar {
  flex: 0 0 auto;
  height: var(--app-bar-height);
  display: flex;
  align-items: center;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  height: calc(var(--app-bar-height) + env(safe-area-inset-top));
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.app-bar__title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
}

/* The canvas: the working surface. Takes all remaining space at every
   viewport size — phone, tablet, desktop alike. */
.canvas {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 0;
}

.canvas__placeholder {
  text-align: center;
  color: var(--ink-soft);
  max-width: 32rem;
}

.canvas__placeholder p {
  margin: 0 0 8px;
}

.canvas__placeholder .hint {
  font-size: 13px;
}