/* StakeMarker Composer page — page-level chrome (header, side-menu, boot/
   sign-in cards, toolbar). Unlike tournament.css (fully standalone, its own
   --t-* tokens), this page loads main.css alongside this file (see
   composer.html's own header comment for why — it hosts a lot of EXISTING
   main-app UI verbatim), so this file reuses main.css's real tokens
   (--bg/--panel/--line/--accent/--ink/--muted/--radius-*) directly instead
   of inventing a parallel set. Only the page-level shell below is new; the
   library list rows, the create/edit wizard, and the Composer formula view
   all keep using their existing classes/stylesheets (custom-game.css)
   completely unchanged. */

:root {
  /* main.css's own --text-xs/sm/base/md/lg/xl tokens all add this one step
     (the same mechanism the app's own small/medium/large font-size SETTING
     uses — see main.css's :root[data-font-size="..."] rules, medium=0px,
     large=+8px) — bumping it here scales every size token on THIS page a
     little, without touching the main app's own :root (each page is its
     own document with its own :root, so this can't leak elsewhere). Real
     user feedback: text throughout the Composer read too small. */
  --font-size-step: 2px;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  /* main.css (loaded above) sets html/body to `height:100%; overflow:hidden`
     for the MAIN app's own architecture, where internal elements own their
     own scroll regions and the outer document never scrolls. This page has
     no such internal scroll container (#cpMain/.cp-main just flows in normal
     document layout, same as tournament.html/tournament.css's own html/body
     rule) — inheriting that overflow:hidden left the whole page unable to
     scroll on mobile once content (the library list, the node/wire canvas,
     the Inputs editor) exceeds one screen. Restore normal document scroll. */
  overflow: visible;
  height: auto;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  padding-top: max(14px, env(safe-area-inset-top, 0px));
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-header, 3);
}
.cp-header-left { display: flex; align-items: center; gap: 10px; }
.cp-header h1 { margin: 0; font-size: 18px; font-weight: 600; }
.cp-header-right { display: flex; align-items: center; gap: 10px; }
.cp-current-user {
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--panel-alt);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.cp-btn-ghost { background: transparent; }
.cp-btn-primary { background: var(--accent); border-color: var(--accent); color: #06201d; font-weight: 600; }
.cp-btn.cp-theme-toggle, .cp-btn.cp-menu-toggle { padding: 8px; line-height: 0; min-width: 44px; min-height: 44px; }
.cp-theme-toggle .icon-theme-moon { display: none; }
:root[data-theme="light"] .cp-theme-toggle .icon-theme-sun { display: none; }
:root[data-theme="light"] .cp-theme-toggle .icon-theme-moon { display: block; }

/* ── Side menu ──────────────────────────────────────────────────────── */
.cp-menu-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-dialog, 10050);
  opacity: 0; transition: opacity 0.24s;
}
.cp-menu-backdrop.is-open { opacity: 1; }
.cp-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
  background: var(--panel); border-left: 1px solid var(--line);
  z-index: calc(var(--z-dialog, 10050) + 1);
  transform: translateX(100%); transition: transform 0.24s;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
}
.cp-menu.is-open { transform: translateX(0); }
.cp-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); }
.cp-menu-header h2 { margin: 0; font-size: 16px; }
.cp-menu-content { padding: 16px; overflow-y: auto; }
.cp-menu-section { margin-bottom: 20px; }
.cp-menu-section-title { margin: 0 0 8px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.cp-menu-link { display: block; width: 100%; text-align: left; text-decoration: none; margin-bottom: 4px; }

/* ── Main / cards ───────────────────────────────────────────────────── */
.cp-main { max-width: 1240px; margin: 0 auto; padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.cp-card {
  background: var(--card-bg, var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  text-align: center;
  max-width: 480px;
  margin: 40px auto;
}
.cp-card h2 { margin: 0 0 8px; }
.cp-muted { color: var(--muted); }
.cp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-xs); }
.cp-spinner {
  width: 28px; height: 28px; margin: 0 auto 12px;
  border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: cp-spin 0.8s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

.cp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cp-section-title { margin: 0; font-size: 20px; }

.cp-library-body { display: flex; flex-direction: column; gap: 12px; }
/* [uge-builder 2026-07-25, Phase 1 scope note] "Activate for this round"
   only makes sense from inside a live round (docs/index.js's RoundState) —
   there is no round context on this standalone page. Hiding it here rather
   than reusing library-modal.js's renderList unconditionally, since that
   same row-rendering function is also shared by the in-app modal (where
   there IS always an active round). A real "open this game in the app"
   deep-link is a tracked follow-up, not shipped here. */
.cp-library-body .custom-game-library-row-activate { display: none; }

/* Create/Edit detail view — CustomGameCreateModal.mountCreateBody()'s
   content (docs/js/games/custom/create-modal.js), mounted here as page
   content instead of a modal panel. Its own classes (.custom-game-*,
   .final-round-report-section) already carry all the real layout/spacing.
   [2026-07-25] Was capped at 640px (a prose-reading width) — real user
   feedback that the detail view (in particular the value-trace view's node/
   wire canvas and multi-column seed editor, both genuinely wide content)
   was cramped into a narrow column on desktop with huge empty margins on
   either side. This max-width only ever GATES GROWTH on wide viewports —
   raising it changes nothing on mobile/tablet, which are already narrower
   than either number. */
.cp-detail-body { max-width: 1200px; }
/* Same reason as .cp-library-body's activate-row hide above — no live round
   on this standalone page, only "Save to my library" is meaningful here. */
.cp-detail-body .custom-game-create-activate { display: none; }