/*
 * app.css — a bare reset and the grid wiring, nothing more.
 *
 * This scaffold ships structure, not style. The rules below normalise the box model,
 * make the page grid read the element coordinates the renderer emits, and give the
 * default widgets a neutral fixed position so they are reachable. There is deliberately
 * NO colour palette, NO typography and NO spacing scale: the project's web designer adds
 * those, styling the semantic classes (.site-header, .site-nav, .page-grid, .el-*,
 * #pryspec-banner, #chatbot-launcher, …). Keeping this file theme-free means a redesign
 * never has to unpick opinions that were never meant to be here.
 */

/* ---- Reset: predictable box model, no inherited surprises. ---------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---- Layout skeleton: unstyled landmarks the designer will theme. --------------- */
.site-header { display: flex; align-items: center; gap: 1rem; }
.site-nav { display: flex; gap: 0.75rem; }
.site-main { display: block; }
.site-footer { display: flex; align-items: center; gap: 0.75rem; }

/* ---- Page grid: maps the backend element coordinates onto CSS grid. -------------
 * The renderer sets --col, --col-span, --row, --row-span and optional --height per
 * element. A 12-column track is a sensible default canvas; the designer can override
 * the column count and everything else. Elements place themselves from their custom
 * properties, so re-theming never touches the PHP.
 */
.page-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0; /* designer sets spacing */
}
.el {
  grid-column: calc(var(--col, 0) + 1) / span var(--col-span, 1);
  grid-row: calc(var(--row, 0) + 1) / span var(--row-span, 1);
  min-height: var(--height, auto);
}

/* ---- Default widgets: neutral, reachable positions; designer restyles freely. ---- */
#pryspec-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 0.5rem;
}
#chatbot-launcher {
  position: fixed; right: 1rem; bottom: 1rem;
}
#chatbot-panel {
  position: fixed; right: 1rem; bottom: 4rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
#chatbot-panel[hidden] { display: none; }

/* ---- Editor pages (login/reset/…): keep them usable before any theming. ---------- */
.card { display: block; }
.msg { display: none; }
.msg.show { display: block; }