/* grid-app.css — chrome for the DASHBOARD surface (kernel/grid.html).
 *
 * Hand-maintained, like every other file under docs/css. Ported from
 * ~/rx-studio-apps/pages/grid/index.html, which carries this CSS inline:
 * the grid kernel ships no stylesheet of its own, and without these
 * rules the surface renders inside the canvas app's fixed-size page and
 * the gridstack widgets have no header chrome at all.
 *
 * Two jobs:
 *   1. hide canvas-only chrome in `.rxk-mode-grid` (Explorer tree, page
 *      background, zoom controls, smart guides) and flatten the page
 *      wrap so the board fills the window instead of a scaled page;
 *   2. style the gridstack widget: 26px header, drag handle, icon
 *      buttons, the global-variables meta row.
 */
html, body { height: 100%; margin: 0; }
    body { overflow: hidden; }
    /* Hide canvas-only chrome in grid mode.
       - Activity bar: drop Explorer (layers/elements tree) and Page Settings.
       - Left dock panels for those same activities.
       - Toolbar zoom controls (no per-pixel zoom in grid mode).
       - Background, overlay grid, smart guides (canvas-only chrome). */
    .rxk-mode-grid [title="Explorer"],
    .rxk-mode-grid [data-panel="explorer"],
    .rxk-mode-grid .rxk-toolbar-zoom,
    .rxk-mode-grid .rxk-page-bg,
    .rxk-mode-grid .rxk-grid,
    .rxk-mode-grid .rxk-guides { display: none !important; }
    /* The Page Settings panel is kept (re-labelled to Grid Settings by
       the grid kernel) — Explorer / Layers / page-canvas chrome are
       canvas-only and stay hidden. */
    .rxk-mode-grid [title="Page Settings"] { /* shown */ }
    /* Let the grid fill the viewport instead of being trapped inside the
       fixed-size canvas page. The canvas chrome (.rxk-page-wrap → sizer
       → page) is meant for a scaled fixed-size page; flatten it for the
       grid so the surface just flows. */
    .rxk-mode-grid .rxk-page-wrap {
      padding: 0 !important; display: block !important;
    }
    .rxk-mode-grid .rxk-page-sizer {
      width: 100% !important; height: 100% !important;
      transform: none !important; margin: 0 !important;
    }
    .rxk-mode-grid .rxk-page {
      position: relative !important;
      width: 100% !important; height: 100% !important;
      box-shadow: none !important; background: var(--rxk-panel) !important;
    }
    .rxk-mode-grid .rx-surface {
      position: relative !important; inset: auto !important;
      width: 100% !important; min-height: 100% !important;
      padding: 8px; box-sizing: border-box;
      background: var(--rxk-panel);
    }
    /* gridstack chrome — matches the ome-view panel header style.
       - 8px outer radius, 1px outline, soft shadow
       - 26px-tall white header, absolutely positioned over the
         content. The body is padded to clear it; the cpnt then fills
         everything below.
       - Icon buttons: 20×20px square, 14×14 svg inside, gray stroke
         default → accent blue on hover/active with a light bg. */
    .grid-stack-item-content {
      position: relative;
      background: var(--rxk-overlay, #fff);
      outline: 1px solid var(--rxk-line, #d9d9d9);
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(0,0,0,.08);
      overflow: hidden;
      box-sizing: border-box;
    }
    .grid-stack-item.is-selected .grid-stack-item-content {
      outline-color: var(--rxk-accent, #0e639c);
      box-shadow: 0 0 0 1px var(--rxk-accent, #0e639c) inset, 0 1px 4px rgba(0,0,0,.08);
    }
    .rxk-grid-head {
      position: absolute; top: 0; left: 0; right: 0; z-index: 6;
      height: 26px; min-height: 26px;
      display: flex; align-items: center; justify-content: space-between;
      padding-left: 8px; padding-right: 4px;
      background: #ffffff;
      border-bottom: 1px solid #e4e4e4;
      box-sizing: border-box;
      cursor: move; user-select: none;
    }
    [data-theme="dark"] .rxk-grid-head {
      background: var(--rxk-chrome, #2d2d2d);
      border-bottom-color: var(--rxk-line, #3c3c3c);
    }
    .rxk-grid-main {
      display: flex; align-items: center; gap: 6px;
      min-width: 0; flex: 1 1 auto;
    }
    .rxk-grid-title {
      /* Pin a minimum slot so a widget's title stays visible even when
         the global-variables meta + menu buttons get crowded into the
         26 px header. Without this, .rxk-grid-main's flex children
         could compress the title to zero on a narrow widget and the
         user would see only globals + menu, no name. */
      min-width: 60px;
      flex: 0 1 auto;
      font-size: 12px; line-height: 1.2;
      color: #555555;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    [data-theme="dark"] .rxk-grid-title { color: var(--rxk-ink-muted, #9da1a6); }
    /* Global variables meta — appears inline after the title once the
       cpnt's state shows any { vroot:1, vpath:"x" } reference. Hidden
       when no globals are bound. Same look as ome-view's
       `.ome-view-panel-leading-meta` row. */
    .rxk-grid-globals {
      display: flex; align-items: center; gap: 4px;
      min-width: 0; margin-left: 4px; padding-left: 6px;
      border-left: 1px solid #d9d9d9;
    }
    [data-theme="dark"] .rxk-grid-globals { border-left-color: var(--rxk-line, #3c3c3c); }
    .rxk-grid-global-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 16px; height: 16px; color: #8a8a8a;
    }
    .rxk-grid-global-icon svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; }
    .rxk-grid-global-names {
      display: inline-flex; align-items: center; gap: 2px;
      min-width: 0; color: #9a9a9a;
      font-size: 11px; line-height: 1.2;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .rxk-grid-global-binding { display: inline-flex; align-items: center; gap: 0; }
    .rxk-grid-global-name { font-style: italic; }
    .rxk-grid-local-name { color: #0057BA; margin-left: 4px; }
    [data-theme="dark"] .rxk-grid-local-name { color: var(--rxk-accent, #3794ff); }
    .rxk-grid-global-sep { color: #b0b0b0; margin: 0 2px; }
    .rxk-grid-menu {
      display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto;
    }
    .rxk-grid-icon-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 20px; height: 20px; min-width: 20px; min-height: 20px;
      border-radius: 4px; cursor: pointer; padding: 0; outline: 0;
      background: transparent; border: 1px solid transparent;
      box-sizing: border-box; line-height: 1;
      color: #777777;
    }
    .rxk-grid-icon-btn svg {
      width: 14px; height: 14px; display: block;
      fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round;
    }
    .rxk-grid-icon-btn:hover,
    .rxk-grid-icon-btn.is-active,
    .rxk-grid-icon-btn[aria-pressed="true"] {
      background: #eeeeee; border-color: #dddddd; color: #1565c0;
    }
    [data-theme="dark"] .rxk-grid-icon-btn { color: var(--rxk-ink-muted, #9da1a6); }
    [data-theme="dark"] .rxk-grid-icon-btn:hover,
    [data-theme="dark"] .rxk-grid-icon-btn.is-active {
      background: var(--rxk-hover, #37373d);
      border-color: var(--rxk-line-strong, #4b4b4b);
      color: var(--rxk-accent, #3794ff);
    }
    .rxk-grid-body {
      position: relative;
      padding-top: 34px; /* 26px header + 8px breathing room */
      padding-left: 10px; padding-right: 10px; padding-bottom: 10px;
      width: 100%; height: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }
    .rxk-grid-body > .cpnt { width: 100%; height: 100%; }

/* ── height, which the upstream page does not have to supply ──────────
 * Measured here on 2026-09-11: the chain runs .rxk-viewport (730px,
 * absolute) → .rxk-page-wrap → .rxk-page-sizer → .rxk-page →
 * .rx-surface.grid-stack, and the wrap is content-sized, so the board
 * collapsed to 16px and a launched module had nowhere to land (the
 * widget never appeared, with no error). The upstream page gets away
 * with `display:block` on the wrap because its bundle predates the
 * kernel's current grid layout; we give the chain an explicit height
 * instead of inheriting one that is no longer there.
 *
 * Flex column, not absolute children: the doc title sits INSIDE the
 * wrap above the board, so the board takes the remaining height rather
 * than the full one (which would push it off the bottom by the title's
 * height).
 */
.rxk-mode-grid .rxk-page-wrap {
  position: absolute; inset: 0;
  display: flex !important; flex-direction: column; align-items: stretch;
  overflow: auto;
}
.rxk-mode-grid .rxk-page-sizer {
  flex: 1 1 auto; min-height: 0;
  width: 100% !important; height: auto !important;
}
.rxk-mode-grid .rxk-page { height: 100% !important; min-height: 320px; }
.rxk-mode-grid .rx-surface { min-height: 100%; }

/* ── the title belongs in the TOPBAR ──────────────────────────────────
 * The grid kernel moves it out: gridDocTitle.js injects
 *   .rxk-mode-grid .rxk-title { display: none !important }
 * and renders a big centred .rxk-grid-doc-title above the board
 * instead, which costs a strip of board height on every page and puts
 * the document's name somewhere no other page in this site keeps it.
 * Both rules are !important, so these have to be at least as specific
 * AND !important to win. The topbar element already carries the same
 * text — the kernel keeps it in sync — so nothing else is needed.
 */
.rxk-root.rxk-mode-grid .rxk-title { display: block !important; }
.rxk-root.rxk-mode-grid .rxk-grid-doc-title { display: none !important; }