/**
* The Game-info dialog's CSS and markup, composed into `shell-page.ts`.
*
* Split out for the reason `publish-panel.ts` and `asset-detail-panel.ts` were: the shell page is
* the busiest file in the package. Style and markup carry no closure state, so they can leave
* without threading anything across a boundary; the behaviour stays inline there, because it
* needs the enclosing IIFE's element lookups and its `closeMore` / Escape chain.
*
* What this surface is for: the bar spelled out the game's name, id and environment side by side
* and had no room left, while the two things that decide how the whole project LOOKS — the
* accepted reference image and the cover art — were visible only in a terminal. One click on the
* name now answers both: what this game is, and what it is supposed to look like.
*
* Same template-literal rules as its host: **no backticks**, and a backslash in a regex has to be
* doubled to survive the literal. Every colour is a `--bm-*` token; `shell-page.test.ts` fails the
* build on a hex that is not black or white.
*/
/**
* Styles for `#info-overlay` and for the bar control that opens it.
*
* The trigger is not a pill: a pill is a control, and this is the page's identity — the game's
* name, in the weight the bar already gave it, that happens to be clickable. Only the hover and
* focus treatments are added, so it reads as a control the moment a pointer is near it.
*/
export declare const GAME_INFO_PANEL_CSS = "\n /* The name IS the button. Bold and white like the label it replaces, with the id and env it\n absorbed now one click away rather than two more slots in the bar. */\n #game-info-toggle {\n display: flex;\n align-items: center;\n gap: 6px;\n max-width: 26vw;\n padding: 4px 8px;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 6px;\n color: var(--bm-text);\n font-family: var(--bm-font);\n font-size: 14px;\n font-weight: 700;\n line-height: 1.2;\n cursor: pointer;\n transition: background .15s ease, border-color .15s ease;\n }\n #game-info-toggle:hover { background: var(--bm-surface-alt); border-color: var(--bm-border-muted); }\n #game-info-toggle:focus-visible { outline: none; box-shadow: var(--bm-focus-ring); }\n #game-info-toggle .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n /* The affordance. Dim, so the name still reads as the name rather than as a menu. */\n #game-info-toggle .chevron { flex: none; color: var(--bm-text-dim); font-size: 10px; }\n\n /* Level with the other two dialogs: all three are opened from different controls and never\n stack. */\n #info-overlay { z-index: 10; }\n #info-dialog { width: min(560px, 92vw); max-height: 86vh; overflow-y: auto; padding: 20px; }\n #info-dialog h2 { margin-bottom: 16px; }\n /* A definition list, because that is what this is: a fixed set of fields with one value each.\n Two columns so the values line up and the whole block is scannable without reading it. */\n #info-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 20px; }\n #info-facts dt { font-size: 12px; font-weight: 700; text-transform: uppercase;\n letter-spacing: 1.4px; color: var(--bm-text-muted); }\n #info-facts dd { margin: 0; min-width: 0; color: var(--bm-text); overflow-wrap: anywhere; }\n /* Ids, versions and modes are read character by character; names and genres are read as words. */\n #info-facts dd.mono { font-family: var(--bm-font-mono); font-size: 12px; }\n #info-facts dd .note { color: var(--bm-text-dim); }\n /* The two pictures, side by side: they are the same kind of thing and are compared, not read\n in order. They wrap to one column when the dialog is at its narrowest. */\n #info-art { display: flex; flex-wrap: wrap; gap: 16px; }\n .info-art-card { flex: 1 1 200px; min-width: 0; }\n .info-art-card .bm-label { display: block; margin-bottom: 8px; }\n /* A square frame either way, so a present picture and a missing one leave the dialog the same\n height and the two cards stay level.\n\n A button rather than a div, because with a picture in it that is what it is: the thumbnail is\n a couple of hundred pixels of an image generated at 1024, which is not enough to judge the\n look it is supposed to fix \u2014 clicking it opens the full size. Disabled while the card is\n empty, so the control is dead exactly when there is nothing to open, and reachable by keyboard\n for free either way. */\n .info-art-frame {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n aspect-ratio: 1 / 1;\n padding: 12px;\n background: var(--bm-surface-alt);\n border: 1px solid var(--bm-border-muted);\n border-radius: 6px;\n color: inherit;\n font: inherit;\n text-align: center;\n cursor: zoom-in;\n transition: border-color .15s ease;\n }\n .info-art-frame:hover:not(:disabled) { border-color: var(--bm-text-dim); }\n .info-art-frame:focus-visible { outline: none; box-shadow: var(--bm-focus-ring); }\n /* Not dimmed like an ordinary disabled control: there is nothing to enable here, and greying the\n \"not yet\" copy would hide the command that fixes it. */\n .info-art-frame:disabled { cursor: default; }\n /* The frame holds the picture AND the \"not yet\" copy, and shows exactly one of them: the class\n is applied by openInfo(), because a page assembled as a string has no inline styles to toggle\n (DESIGN.md, and the same rule the Creator follows). */\n .info-art-frame img { display: none; max-width: 100%; max-height: 100%; border-radius: 4px; }\n .info-art-frame.has-image img { display: block; }\n .info-art-frame.has-image .empty { display: none; }\n /* What to run to make the missing one, rather than the bare fact that it is missing. */\n .info-art-frame .empty { font-size: 12px; color: var(--bm-text-dim); }\n .info-art-frame .empty code { display: block; margin-top: 6px; color: var(--bm-aqua);\n font-family: var(--bm-font-mono); }\n .info-art-card .caption { margin-top: 8px; font-size: 12px; color: var(--bm-text-dim);\n overflow-wrap: anywhere; }\n .info-art-card .caption a { color: var(--bm-aqua); text-decoration: none; }\n .info-art-card .caption a:hover { text-decoration: underline; }\n /* An expiring reference URL is the one thing on this card worth interrupting for. */\n .info-art-card .caption .stale { color: var(--bm-pumpkin); }\n /* === The full-size view ===================================================================\n A layer of its own above the dialog rather than a new browser tab: the dev view is the window\n the creator is already in, and a tab showing a bare image on a loopback port is a place they\n then have to come back from. Click anywhere, or Escape, and the dialog is still underneath\n exactly as it was. */\n #info-zoom { z-index: 11; flex-direction: column; gap: 12px; cursor: zoom-out; }\n #info-zoom img { max-width: 92vw; max-height: 84vh; border-radius: 6px;\n box-shadow: var(--bm-shadow-dialog); }\n #info-zoom .hint { font-size: 12px; color: var(--bm-text-muted); }\n\n /* The sidecar could not answer. Said in the dialog rather than in the bar's status line, which\n belongs to the save state and would be overwritten by the next poll. */\n #info-error { display: none; margin: 0 0 16px; font-size: 12px; color: var(--bm-pumpkin); }\n #info-error.show { display: block; }\n #info-actions { display: flex; justify-content: flex-end; margin-top: 20px; }\n";
/**
* Markup for the Game-info dialog.
*
* Every value is empty until `openInfo()` fills it from `/api/game-info`. Nothing may be
* interpolated at render time: this page is built once when the server starts, and `bitmagic
* cover` or `bitmagic reference accept` usually runs hours later in another terminal.
*/
export declare const GAME_INFO_PANEL_HTML = "