/*
 * Layout for the pattern "Editor" (DESIGN.md): masthead, workspace, action bar and status line on the
 * left, parameter panel on the right. Taken from risogen. Needs design.css. App-specific layout goes
 * into the project's own stylesheet.
 *
 * <div class="app">
 *   <header class="masthead t-l">…</header>
 *   <main class="stage">…</main>
 *   <div class="toolbar t-l">…</div>
 *   <aside class="panel">…</aside>
 *   <footer class="status t-s caps">…</footer>
 * </div>
 */

html, body { overflow: hidden; background: var(--paper-2); }

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
  grid-template-rows: var(--masthead-h) minmax(0, 1fr) var(--toolbar-h) auto;
  grid-template-areas:
    "head    panel"
    "stage   panel"
    "tools   panel"
    "status  panel";
  height: 100vh;
}

/* ---------- Masthead: name and subtitle, top left ---------- */

.masthead {
  grid-area: head;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
  padding: 0 var(--s-24);
}
.masthead .name { align-self: flex-start; }

/* ---------- Action bar below the workspace ---------- */

.toolbar {
  grid-area: tools;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24);
  padding: 0 var(--s-24);
  min-width: 0;
}
.toolbar .actions { gap: var(--s-24); align-items: center; }

/* ---------- Status line: columns of two rows, small, values in ink, the rest in ink-2 ---------- */

.status {
  grid-area: status;
  display: flex;
  align-items: flex-start;
  gap: var(--s-64);
  padding: var(--s-12) var(--s-24) var(--s-24);
  min-width: 0;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
}
.status .col { display: flex; flex-direction: column; align-items: flex-start; }
.status .hi { color: var(--ink); }
.status .inline { display: flex; gap: var(--s-8); }
/* Links to studio and author: exception, look like the text next to them (not underlined) */
.status a { color: inherit; text-decoration: none; }
.status a:focus-visible { outline: 1px solid var(--signal); outline-offset: 3px; }
/* Message column: loading in signal, errors in mixed case */
.status .msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.status .msg.busy { color: var(--signal); }
.status .msg.error { color: var(--signal); text-transform: none; letter-spacing: 0; white-space: normal; }

/* ---------- Workspace: centres its content, no frame ---------- */

.stage {
  grid-area: stage;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: var(--s-32);
}
.stage > canvas, .stage > svg { display: block; max-width: 100%; max-height: 100%; }
/* Empty state: only the actions to get started, centred, 24px apart */
.stage .empty { position: absolute; gap: var(--s-24); }
.stage:not(.is-empty) .empty { display: none; }
.stage.is-empty > canvas, .stage.is-empty > svg { display: none; }
.stage.drop { outline: 1px solid var(--signal); outline-offset: calc(var(--s-16) * -1); }

/* ---------- Panel ---------- */

.panel {
  grid-area: panel;
  overflow-y: auto;
  border-left: 1px solid var(--line);
}
/* Sections apart: gap above, hairline above and below */
.panel .section + .section { margin-top: var(--section-gap); border-top: 1px solid var(--line); }

/* Little room: smaller action rows */
@media (max-width: 1280px) {
  .toolbar .actions { gap: var(--s-16); font-size: var(--t-m); line-height: var(--t-m-lh); }
}