/* ── Daigrammar authoring overlays (palette + property panel) ────────────────
 * Critical layout is applied inline in JS so the overlays work in the headless
 * test harness with no stylesheet; this file is production polish (hover states,
 * focus rings, spacing) layered on top. See js/daigrammar/{palette,propertyPanel}.js.
 */

.dgm-palette {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.dgm-palette__grip:hover { color: #bbb; }

.dgm-tool {
  transition: background 0.12s ease, transform 0.06s ease;
}
.dgm-tool:hover { background: #4a4a52 !important; }
.dgm-tool:active { transform: scale(0.94); }
.dgm-tool:focus-visible { outline: 2px solid var(--accent, #5a8bff); outline-offset: 1px; }

/* Property panel — a compact floating, grip-draggable, collapsible window. */
.dgm-props {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.dgm-props__header { border-bottom: 1px solid #3a3a40; }
.dgm-props__grip:hover { color: #bbb; }
.dgm-props__collapse:hover { color: #fff; }
.dgm-props__swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.dgm-props__row span { font-size: 11px; }
.dgm-props input,
.dgm-props select,
.dgm-props textarea {
  width: 100%;
  box-sizing: border-box;
  background: #26262b;
  color: #e6e6e6;
  border: 1px solid #44444c;
  border-radius: 4px;
  padding: 3px 4px;
  font: inherit;
}
.dgm-props input[type='color'] { padding: 0; height: 24px; }
.dgm-props input[type='range'] { padding: 0; }
.dgm-props input:focus,
.dgm-props select:focus,
.dgm-props textarea:focus { outline: 1px solid var(--accent, #5a8bff); border-color: var(--accent, #5a8bff); }

/* ── Theme toggle button ─────────────────────────────────────────────────────
 * Floating sun/moon control (js/daigrammar/themeToggle.js). Base look is inline;
 * this adds hover/focus polish. Recolored per theme by the chrome block below.
 */
.dgm-theme-toggle { transition: background 0.12s ease, transform 0.06s ease; }
.dgm-theme-toggle:hover { background: #4a4a52 !important; }
.dgm-theme-toggle:active { transform: scale(0.94); }
.dgm-theme-toggle:focus-visible { outline: 2px solid var(--accent, #5a8bff); outline-offset: 1px; }

/* ── DOM-chrome theming (dark/light) ─────────────────────────────────────────
 * The overlays (palette / property panel / theme toggle) set their base colors
 * INLINE (dark), so they'd read as dark chrome on a light canvas. mountDaigrammar
 * stamps `.daigrammar-theme-{light,dark}` on the canvas host; these rules recolor
 * the chrome for LIGHT mode (dark mode keeps the inline defaults). `!important` is
 * required to win over the inline styles. Keep in sync with theme.js THEMES.
 */
.daigrammar-theme-light .dgm-palette,
.daigrammar-theme-light .dgm-props,
.daigrammar-theme-light .dgm-theme-toggle {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #2b2f36 !important;
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.16);
}
.daigrammar-theme-light .dgm-palette__grip,
.daigrammar-theme-light .dgm-props__grip { color: #9aa0a8; }
.daigrammar-theme-light .dgm-props__header { border-bottom-color: #e2e4e8; }
.daigrammar-theme-light .dgm-props__collapse:hover { color: #000; }
.daigrammar-theme-light .dgm-tool {
  background: #eceef1 !important;
  color: #2b2f36 !important;
}
.daigrammar-theme-light .dgm-tool:hover { background: #dfe2e7 !important; }
.daigrammar-theme-light .dgm-theme-toggle:hover { background: #dfe2e7 !important; }
.daigrammar-theme-light .dgm-props input,
.daigrammar-theme-light .dgm-props select,
.daigrammar-theme-light .dgm-props textarea {
  background: #f4f5f7;
  color: #2b2f36;
  border-color: #d3d6db;
}

/* ── Doc elements (markdown box, item 4) ─────────────────────────────────────
 * The doc's rendered markdown lives in the DOM overlay (js/daigrammar/types/doc.js),
 * layered above the Fabric frame. Critical positioning (left/top/size/scale) is set
 * inline in JS so it works headless in the e2e harness; this is presentation polish.
 * The node is pointer-inert (view is read-only; the Fabric frame owns selection); the
 * editor overlay re-enables pointer events for typing.
 */
.dgm-doc__body {
  padding: 8px 10px;
  font: 13px/1.5 var(--dgm-doc-font, system-ui, sans-serif);
  color: var(--dgm-doc-ink, #1b1d21);
  overflow: hidden;
}
.dgm-doc__body > :first-child { margin-top: 0; }
.dgm-doc__body > :last-child { margin-bottom: 0; }
.dgm-doc__body h1, .dgm-doc__body h2, .dgm-doc__body h3 { margin: 0.4em 0 0.3em; line-height: 1.2; }
.dgm-doc__body h1 { font-size: 1.5em; }
.dgm-doc__body h2 { font-size: 1.25em; }
.dgm-doc__body h3 { font-size: 1.1em; }
.dgm-doc__body p, .dgm-doc__body ul, .dgm-doc__body ol { margin: 0.35em 0; }
.dgm-doc__body ul, .dgm-doc__body ol { padding-left: 1.3em; }
.dgm-doc__body code {
  font-family: ui-monospace, monospace; font-size: 0.9em;
  background: rgba(127, 127, 127, 0.18); padding: 0.1em 0.3em; border-radius: 3px;
}
.dgm-doc__body pre { background: rgba(127, 127, 127, 0.14); padding: 8px; border-radius: 5px; overflow: auto; }
.dgm-doc__body pre code { background: none; padding: 0; }
.dgm-doc__body blockquote {
  margin: 0.4em 0; padding-left: 0.8em; border-left: 3px solid rgba(127, 127, 127, 0.4); color: inherit; opacity: 0.85;
}
.dgm-doc__body a { color: #4c8dff; }
.dgm-doc__body table { border-collapse: collapse; }
.dgm-doc__body th, .dgm-doc__body td { border: 1px solid rgba(127, 127, 127, 0.35); padding: 2px 6px; }

/* Editor overlay (raw-markdown textarea fallback) — button polish; layout is inline. */
.dgm-doc-editor__bar button {
  font: 12px/1 inherit; padding: 4px 10px; border-radius: 4px; cursor: pointer;
  border: 1px solid #44444c; background: #2b2b31; color: #e6e6e6;
}
.dgm-doc-editor__bar button[data-testid="dgm-doc-editor-save"] { background: #3b6fe0; border-color: #3b6fe0; color: #fff; }
.dgm-doc-editor__bar button:hover { filter: brightness(1.1); }

.daigrammar-theme-dark .dgm-doc__body { color: var(--dgm-doc-ink, #e6e6e6); }

/* ── Family toolbars (F3, §5b) — title header, add-family, close, multiselector ──
 * Each family toolbar reuses `.dgm-palette` (so the base + light-theme recolor above
 * already cover it); these add the new interactive bits + light-mode ink. Layout is inline.
 */
.dgm-palette__close,
.dgm-palette__add { transition: background 0.12s ease, color 0.12s ease; }
.dgm-palette__close:hover,
.dgm-palette__add:hover { color: #fff; background: #4a4a52 !important; }
.dgm-family-selector__row:hover { background: #3a3a40; }

.daigrammar-theme-light .dgm-palette__title { color: #6b7280; }
.daigrammar-theme-light .dgm-palette__close,
.daigrammar-theme-light .dgm-palette__add { color: #6b7280; }
.daigrammar-theme-light .dgm-palette__close:hover,
.daigrammar-theme-light .dgm-palette__add:hover { color: #111; background: #dfe2e7 !important; }
.daigrammar-theme-light .dgm-palette__add { border-color: #c3c7cd; }