/* css/components/editor-chrome.css
 * Utility classes the Build workspace's new inline-editing UI needs
 * (grip/kebab/dropdown/popover controls, tab-styled toggles) that the design
 * system's own docs/design-system/tokens/interaction.css proposes but never
 * ships live -- that file is a spec, never <link>ed anywhere.
 *
 * Its .g-bevel/.g-bevel-thick reference --g-bevel98-raised/-sunken/-thick
 * directly. Don't copy that: theme-v3.css's own comment on those properties
 * (search --g-bevel98-raised there) explains why a custom property that
 * itself contains var() references only resolves them once, at :root, and
 * so does not re-theme correctly under a profile's own palette or this
 * page's live preview. Every real bevelled control in this codebase (.btn,
 * .bigbtn, .pact -- theme-v3.css section 3) inlines the four-layer
 * box-shadow recipe directly instead; these classes do the same.
 *
 * Ownership: this file owns the classes below exclusively. Do not duplicate
 * them in css/theme-v3.css or css/gobstagram.css.
 */

/* ---- Bevelled buttons: 1px reading edge (.g-bevel) or 2px (.g-bevel-thick
   for primary/emphasis controls -- add the class, never widen with a
   border). Colour is owned entirely here; a consumer must not set
   background/color/border-color/box-shadow inline, or the button stops
   responding to hover, press and disabled. */
.g-bevel {
  background: var(--g-button-surface); color: var(--g-button-text);
  border: 0; border-radius: var(--g-geometry-cornerRadius); cursor: pointer;
  box-shadow: inset 1px 1px 0 var(--g-surface-elevated), inset -1px -1px 0 var(--g-border-strong), inset 2px 2px 0 var(--g-button-surface), inset -2px -2px 0 var(--g-button-border);
}
.g-bevel-thick {
  box-shadow: inset 2px 2px 0 var(--g-surface-elevated), inset -2px -2px 0 var(--g-border-strong), inset 3px 3px 0 var(--g-button-surface), inset -3px -3px 0 var(--g-button-border);
}
.g-bevel:hover:not(:disabled) { background: var(--g-button-hover); }
.g-bevel:active:not(:disabled),
.g-bevel[aria-pressed="true"]:not(:disabled) {
  background: var(--g-button-active); color: var(--g-button-activeText);
  box-shadow: inset -1px -1px 0 var(--g-surface-elevated), inset 1px 1px 0 var(--g-border-strong), inset -2px -2px 0 var(--g-button-surface), inset 2px 2px 0 var(--g-button-border);
}
.g-bevel-thick:active:not(:disabled),
.g-bevel-thick[aria-pressed="true"]:not(:disabled) {
  box-shadow: inset -2px -2px 0 var(--g-surface-elevated), inset 2px 2px 0 var(--g-border-strong), inset -3px -3px 0 var(--g-button-surface), inset 3px 3px 0 var(--g-button-border);
}
.g-bevel:disabled {
  background: var(--g-button-disabled); color: var(--g-button-disabledText); cursor: default;
  box-shadow: inset 1px 1px 0 var(--g-surface-elevated), inset -1px -1px 0 var(--g-gray-300, #bfc7c1), inset 2px 2px 0 var(--g-button-disabled), inset -2px -2px 0 var(--g-gray-300, #bfc7c1);
}
.g-bevel:focus-visible { outline: 2px solid var(--g-focus-ring); outline-offset: 2px; }

/* ---- Reset buttons that must look like plain text/links. ---- */
.g-unbutton { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.g-linky { background: none; border: 0; padding: 0; font: 11px Verdana, Arial, sans-serif; color: var(--g-text-muted); cursor: pointer; }
.g-linky:hover { text-decoration: underline; }

/* ---- Focus ring for any control this file styles that isn't already a
   .g-bevel (an unbutton-based grip or kebab trigger, say). ---- */
.g-focusable:focus-visible { outline: 2px solid var(--g-focus-ring); outline-offset: 2px; }
.g-focusable:focus:not(:focus-visible) { outline: none; }

/* ---- Build workspace per-block grip: composer-block-tools' own cursor:grab
   (gobstagram.css) still covers the whole bar from when it was the handle;
   this just sizes the actual handle now that it's narrower. ---- */
.composer-grip { display: inline-flex; align-items: center; padding: 2px 4px; font-size: 12px; line-height: 1; cursor: grab; color: var(--g-text-muted); }

/* ---- Click-to-edit block headings (setupHeadingEditing(), js/app.js): the
   [contenteditable] attribute is only ever set by that editor JS, so this
   never reaches the public profile page. ---- */
.pb-hd-t[contenteditable] { cursor: text; border-radius: 2px; }
.pb-hd-t[contenteditable]:hover { outline: 1px dashed currentColor; outline-offset: 2px; }
.pb-hd-t[contenteditable]:focus { outline: 2px solid var(--g-focus-ring); outline-offset: 2px; }

/* ---- Build toolbar: Add module / Page order triggers, sits between the
   colour bar and the canvas/inspector grid (composer.php). Its triggers sit
   at the left of the panel, so their .pact-drop (gobstagram.css's generic
   right:0, built for a trigger near the right edge like the profile "More"
   button) would open leftward off-screen; left-align it to open rightward
   into the panel instead. ---- */
.composer-build-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 9px; }
.composer-build-toolbar .pact-drop { right: auto; left: 0; }

/* ---- Add module dropdown: reuses .composer-palette-list/.composer-palette-item
   (gobstagram.css) for the items themselves -- same look the old always-open
   catalogue had -- just adds a group label and a size limit for the popover. ---- */
.composer-add-module-menu { width: 280px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; }
.composer-add-module-group-label { margin: 10px 0 3px; font: 700 10px Verdana, Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--g-legacy-headerText, #663300); }
.composer-add-module-group-label:first-child { margin-top: 0; }

/* ---- Page order popover: renderPageOrderPopover() (js/app.js) owns its
   contents. Its rows hold several controls apiece, so unlike Add module
   above it doesn't reuse .composer-palette-item (a single-button item). ---- */
.composer-page-order-menu { width: 260px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; }
.composer-page-order-group-label { margin: 10px 8px 3px; font: 700 10px Verdana, Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--g-legacy-headerText, #663300); }
.composer-page-order-group-label:first-child { margin-top: 4px; }
.composer-page-order-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px; font-size: 11px; }
.composer-page-order-row + .composer-page-order-row { border-top: 1px dotted var(--g-border-default, #e4bc86); }
.composer-page-order-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-page-order-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.composer-page-order-actions button { font-size: 10px; white-space: nowrap; }
.composer-page-order-actions button:disabled { color: var(--g-text-muted); cursor: default; }

/* ---- Character Sheet editor (renderStatSheetInspector(), js/app.js): the
   pages tablist and the hand-built table-row editor repeatList() can't
   produce on its own. ---- */
.stat-sheet-tablist { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 9px; }
.stat-sheet-tablist [role="tab"][aria-selected="true"] { background: var(--g-button-active); color: var(--g-button-activeText); }
.stat-sheet-table-editor { border: 1px solid var(--g-border-default, #cc9966); padding: 8px; margin: 0 0 8px; }
.stat-sheet-table-editor + .stat-sheet-table-editor { margin-top: 10px; }
.stat-sheet-table-rows { margin: 6px 0; }

/* ---- Touch hit targets: 44px minimum, without changing the desktop
   look, for the smaller editor-chrome controls (grip, kebab, popover
   triggers) that .g-bevel or .g-linky size elsewhere in this file. ---- */
@media (pointer: coarse) {
  .g-bevel { min-height: 44px; }
  .g-linky { min-height: 32px; display: inline-flex; align-items: center; }
}