/* Quiet lesson-local image work; complete private images stay contained on phones. */
.studio-visuals { background: var(--surface-1); color: var(--text); margin-block: 12px; border-block-start: 1px solid var(--border); padding-block: 6px; min-width: 0; }
.studio-visuals > summary, .studio-visuals details > summary, .spr-change-direction > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.sv-body, .sv-need, .sv-asset, .sv-upload, .sv-style, .sv-source-unit, .sp-earlier-images { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.sv-body { display: grid; gap: 16px; padding-block: 8px; }
.sv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-button { min-height: 44px; min-width: 44px; max-width: 100%; padding: 9px 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-1); color: var(--text); font: inherit; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
.studio-plan[data-reading=true] .sp-document .studio-visuals .sv-button { display: inline-block; }
.sv-button:hover { background: var(--surface-2); }
.sv-button:disabled { cursor: default; opacity: .55; }
.sv-button:focus-visible, .studio-visuals summary:focus-visible, .studio-visuals input:focus-visible, .studio-visuals textarea:focus-visible, .studio-visuals select:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sv-field { display: grid; gap: 5px; margin-block: 12px; min-width: 0; }
.sv-field > span { font-weight: 600; }
.studio-visuals textarea, .studio-visuals select, .studio-visuals input[type=file] { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--border-strong); border-radius: 6px; font: inherit; color: var(--text); background: var(--surface-1); }
.studio-visuals textarea { resize: vertical; line-height: 1.5; }
.sv-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-block: 6px; }
.sv-check input { flex: 0 0 22px; width: 22px; height: 22px; }
.sv-help, .sv-status, .sv-notice { line-height: 1.55; color: var(--text-dim); }
.sv-error { line-height: 1.55; color: var(--danger); }
.sv-need { border: 0; padding-inline: 0; margin-inline: 0; }
.sv-editor { border: 0; padding: 0; margin: 0; min-width: 0; }
.sv-need, .sv-asset { margin-block: 14px; padding-block: 12px; border-block-start: 1px solid var(--border); }
.sv-preview { width: 100%; min-width: 0; align-self: start; background: var(--surface-2); }
.sv-preview img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
.sv-source-unit pre, .sv-source-refs pre, .sv-comparison pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; font: inherit; line-height: 1.6; }
.sv-source, .sv-style { padding-block: 8px; }
.sv-body[hidden], .sv-body [hidden], .sp-earlier-images [hidden] { display: none !important; }
.sp-earlier-images { padding-block: 12px; }
@media (min-width: 900px) {
  .sv-asset { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr); gap: 16px; align-items: start; }

}
@media (prefers-reduced-motion: reduce) { .studio-visuals * { scroll-behavior: auto; transition: none; animation: none; } }

.sv-image-context { min-width: 0; position: relative; }
.sv-image-context > .sv-status { margin-block-start: 0; }
.sv-library-image, .sv-more, .sv-placements, .sv-placement, .sv-image-details { min-width: 0; }
.sv-library-image > summary { gap: 8px; color: var(--text-dim); }
.sv-library-image[data-current=true] > .sv-asset { border-block-start: 0; margin-block-start: 0; }
.sv-image-menu { position: absolute; z-index: 8; inset-inline-end: 0; top: 44px; width: min(100%, 320px); padding: 6px; box-sizing: border-box; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 8px 24px #0003; }
.sv-image-menu .sv-button { display: block; width: 100%; text-align: start; border-color: transparent; }
.sv-placement { margin-block: 10px; }
.sv-placement .sv-button { width: 100%; text-align: start; }
.sv-caption { color: var(--text-dim); line-height: 1.55; margin-block: 6px 14px; white-space: pre-wrap; }
.sv-quarantine { border-inline-start: 3px solid var(--border-strong); padding-inline-start: 12px; }
.sv-preview:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Preserve native disclosure affordances on the main image-work sections. */
.studio-visuals > summary,
.studio-visuals .sv-needs > summary,
.studio-visuals .sv-style > summary,
.studio-visuals .sv-attempts > summary {
  display: list-item;
  list-style-position: inside;
  box-sizing: border-box;
  padding-block: 10px;
}