/* SM-593: the ONE shared image-alignment/sizing stylesheet for rich-text
   content produced by the shared Quill editor (static/tools/shared/
   editor-toolbar.js). Loaded ONCE, site-wide, via templates/base.html (the
   same mechanism as css/theme.css and css/motion.css) so it reaches both:
     - the editor's own WYSIWYG body while authoring (.sm-editor-body
       .ql-editor img), and
     - every public surface that renders saved editor HTML (blog posts,
       TADS lessons/sections/modules/courses, SMTV video descriptions,
       booking notes) --
   with the SAME rules, so what the editor shows is what the public page
   renders (WYSIWYG) with zero per-page template edits on either side. A
   private per-surface copy of any rule below is a defect -- add the
   surface's wrapper class to the selector list here instead.

   Every color is one of the site's existing --tokens (same set already
   used by editor-toolbar.css) -- never a new hex. */

/* Base: every image inside any known editor-content surface. display:
   inline-block (rather than the browser default `inline`) is what lets two
   consecutive un-aligned/centered images sit side by side with a real gap
   instead of touching. */
.sm-editor-body .ql-editor img,
.lesson-body-html img,
.video-body-html img,
.bp-body img,
.section-desc img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: top;
  margin: 4px 8px 8px 0;
}

/* Alignment variants. Same specificity (type + one class) as the base
   per-wrapper rules above, and declared after them, so they win the
   cascade regardless of which wrapper the image happens to render inside. */
img.sm-img-left {
  float: left;
  margin: 4px 20px 12px 0;
}

img.sm-img-right {
  float: right;
  margin: 4px 0 12px 20px;
}

img.sm-img-center {
  display: inline-block;
  margin: 8px 10px;
}

img.sm-img-full {
  display: block;
  float: none;
  width: 100%;
  margin: 12px 0;
}

/* SM-593: the per-image floating resize/align toolbar + corner handles,
   positioned by static/tools/shared/editor-toolbar.js's attachImageTools()
   over the selected <img> inside the Quill body. Editor-only chrome -- it
   never appears in saved/public HTML. */
.sm-img-tools-overlay {
  position: absolute;
  pointer-events: none;
  border: 1px dashed var(--accent);
  z-index: 5;
}

.sm-img-tools-overlay[hidden] { display: none; }

.sm-img-tools-bar {
  position: absolute;
  top: -34px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  pointer-events: auto;
  white-space: nowrap;
}

.sm-img-tools-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--text-mid);
  cursor: pointer;
}

.sm-img-tools-btn:hover,
.sm-img-tools-btn.is-active {
  border-color: var(--accent-light);
  color: var(--accent-light);
}

.sm-img-tools-btn svg { width: 14px; height: 14px; }

.sm-img-tools-width {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding-left: 6px;
  border-left: 1px solid var(--card-border);
  color: var(--text-dim);
  font-size: 10.5px;
}

.sm-img-tools-width-input {
  width: 46px;
  padding: 1px 3px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 3px;
  color: var(--text);
  font-size: 11px;
}

.sm-img-tools-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--accent);
  border: 1px solid var(--card-bg);
  border-radius: 2px;
  pointer-events: auto;
}

.sm-img-tools-handle--top-left { top: -5px; left: -5px; cursor: nwse-resize; }
.sm-img-tools-handle--top-right { top: -5px; right: -5px; cursor: nesw-resize; }
.sm-img-tools-handle--bottom-left { bottom: -5px; left: -5px; cursor: nesw-resize; }
.sm-img-tools-handle--bottom-right { bottom: -5px; right: -5px; cursor: nwse-resize; }