/* Equipment and item search workspace ------------------------------------
   Character selection, slot editing, and catalog results are inspector
   concerns. Keeping their complete base recipe here prevents the core shell
   stylesheet from accumulating late editor overrides. */
/* Range controls are editor-owned, including the shared track/thumb rhythm.
   Canvas-view zoom keeps its own scoped rule in styles.css. */
input[type="range"] {
  width: 100%;
  height: 40px;
  min-width: 0;
  margin: 0;
  appearance: none;
  border-radius: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  accent-color: var(--primary);
}

input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -8px;
  appearance: none;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: var(--background);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: var(--background);
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary) var(--range-progress, 0%), var(--border) var(--range-progress, 0%));
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary) var(--range-progress, 0%), var(--border) var(--range-progress, 0%));
}

input[type="range"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.range-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  color: var(--muted-foreground);
  font-family: var(--mono);
  font-size: 8px;
}

.items-intro-section .items-summary {
  align-items: flex-start;
}

.items-intro-section .items-summary > div {
  display: grid;
  gap: 4px;
}

.item-character-section .item-character-selector {
  margin-top: 0;
}

.item-source-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  margin-top: 12px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  background: var(--muted);
}

.item-source-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--primary-foreground);
  background: var(--primary);
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .02em;
}

.item-source-row > span:last-child {
  display: grid;
  gap: 1px;
}

.item-source-row strong {
  color: var(--foreground);
  font-size: 10px;
  font-weight: 700;
}

.item-source-row small {
  color: var(--muted-foreground);
  font-family: var(--sans);
  font-size: 9px;
}

.item-character-section {
  padding-top: 15px;
  padding-bottom: 15px;
  background: color-mix(in oklch, var(--background) 96%, var(--muted));
}

.item-character-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 5px;
  margin-top: 10px;
}

.item-character-button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  background: var(--background);
  text-align: left;
  cursor: pointer;
}

.item-character-button:hover {
  color: var(--foreground);
  border-color: var(--line-strong);
  background: var(--muted);
}

.item-character-button.is-selected {
  color: var(--foreground);
  border-color: var(--foreground);
  box-shadow: 0 0 0 1px var(--foreground);
}

.item-character-thumb {
  display: block;
  width: 28px;
  height: 32px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--muted);
}

.item-character-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.item-character-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.item-character-copy strong {
  overflow-wrap: anywhere;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
}

.equipment-section .equipment-list {
  gap: 5px;
  margin-top: 11px;
}

/* Item surface contract: selection rows and catalog results share one
   geometry language. Keeping the structural values here prevents a later
   visual layer from silently re-defining the same surface. */
.equipment-section .equipment-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
}

.equipment-section .equipment-row:hover {
  border-color: var(--line-strong);
  background: var(--muted);
}

.equipment-section .equipment-row.is-selected {
  border-color: var(--foreground);
  box-shadow: 0 0 0 1px var(--foreground);
}

.equipment-section .equipment-row.is-empty {
  color: var(--muted-foreground);
  background: color-mix(in oklch, var(--background) 86%, var(--muted));
}

.equipment-section .equipment-icon,
.catalog-section .catalog-result-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 52px;
  min-width: 44px;
  height: 60px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--foreground);
  background: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  text-align: center;
}

.equipment-section .equipment-row.is-selected .equipment-icon {
  color: var(--primary-foreground);
  background: var(--primary);
}

.equipment-section .equipment-copy {
  gap: 2px;
}

.equipment-section .equipment-copy strong {
  color: var(--foreground);
  font-size: 14px;
  font-weight: 650;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: keep-all;
  white-space: normal;
  line-height: 1.5;
}

.equipment-section .equipment-copy span {
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-family: var(--sans);
  font-size: 12px;
  white-space: normal;
  line-height: 1.5;
}

.equipment-section .equipment-check {
  min-width: 27px;
  color: var(--muted-foreground);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  text-align: right;
}

.equipment-section .equipment-row.is-selected .equipment-check {
  color: var(--foreground);
}

.catalog-section .catalog-search {
  margin-top: 0;
}

.catalog-section .catalog-result {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 52px;
  padding: 7px 6px;
}

.catalog-result-action {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--foreground);
  background: var(--muted);
  font-size: 14px;
  line-height: 1;
}

.catalog-result:hover .catalog-result-action {
  border-color: var(--foreground);
  color: var(--primary-foreground);
  background: var(--primary);
}

@media (max-width: 920px) {
  .item-character-selector {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    padding-bottom: 2px;
  }

  .item-character-button {
    min-width: 76px;
  }
}

/* Image editing workspace --------------------------------------------------
   Import, placement and cutout are one compact inspector task. */
.portrait-section {
  display: grid;
  gap: 14px;
  background: color-mix(in srgb, var(--card) 94%, var(--muted));
}

.portrait-section .panel-section-head {
  margin-bottom: 0;
}

.image-state {
  color: var(--muted-foreground);
  font-size: 10px;
  font-weight: 650;
}

.portrait-source-card {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--background);
}

.portrait-source-card.is-empty {
  background: color-mix(in oklch, var(--background) 72%, var(--muted));
}

.source-thumb {
  position: relative;
  width: 64px;
  height: 72px;
  border-color: var(--line);
  border-radius: calc(var(--radius-sm) - 2px);
  background-color: #f2f2ef;
  background-image:
    linear-gradient(45deg, #e4e4df 25%, transparent 25%),
    linear-gradient(-45deg, #e4e4df 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e4e4df 75%),
    linear-gradient(-45deg, transparent 75%, #e4e4df 75%);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-size: 12px 12px;
}

.source-thumb img {
  object-fit: contain;
}

.source-thumb.is-cutout::after {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 4px;
  border-radius: 3px;
  color: #fff;
  background: rgb(24 28 31 / .82);
  content: "투명";
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .02em;
}

.source-copy {
  gap: 4px;
}

.source-copy strong {
  font-size: 12px;
  font-weight: 650;
}

.source-copy span {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-family: var(--sans);
  font-size: 10px;
}

.image-fit-row,
.image-transform-row,
.image-position-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.image-fit-row > span,
.image-transform-row > span,
.image-position-row > span {
  color: var(--muted-foreground);
  font-size: 10px;
  font-weight: 650;
}

.image-zoom-controls {
  display: grid;
  grid-template-columns: 32px 50px 32px minmax(52px, 1fr);
  gap: 4px;
}

.image-zoom-controls button,
.image-nudge-grid button {
  min-width: 0;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--foreground);
  background: var(--background);
  font: 650 12px/1 var(--sans);
}

.image-zoom-controls button:hover,
.image-nudge-grid button:hover {
  border-color: var(--line-strong);
  background: var(--muted);
}

.image-zoom-controls .image-fit-button {
  font-size: 10px;
}

.zoom-readout {
  display: grid;
  place-items: center;
  color: var(--foreground);
  font: 650 10px/1 var(--mono);
}

.image-nudge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.cutout-action {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  padding-inline: 12px;
}

/* Discrete weights communicate what will happen better than a numeric slider. */
.catalog-result-copy strong {
  color: var(--foreground);
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
  font-size: 14px;
  line-height: 1.5;
}

.catalog-result-copy span {
  color: var(--muted-foreground);
  font-family: var(--sans);
  font-size: 12px;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.compact-switch input:focus + span {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.compact-switch span { background: var(--muted-foreground); }
.compact-switch span::after { background: var(--background); }

.compact-option-row select { border-color: var(--muted-foreground); }

.title-font-option-row {
  align-items: start;
}

.title-font-control {
  gap: 8px;
}

.title-weight-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-height: 0;
}

.title-weight-label {
  padding-top: 10px;
  color: var(--muted-foreground);
  font-size: 9px;
  font-weight: 600;
}

.title-weight-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
  gap: 4px;
}

.title-weight-option {
  display: grid;
  min-width: 0;
  min-height: 52px;
  place-items: center;
  gap: 2px;
  padding: 5px 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--foreground);
  background: var(--background);
}

.title-weight-option > span {
  font-family: var(--weight-preview-font, var(--sans));
  font-size: 17px;
  line-height: 1;
}

.title-weight-option small {
  overflow: hidden;
  width: 100%;
  color: var(--muted-foreground);
  font-size: 7px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-weight-option.is-selected {
  border-color: var(--foreground);
  box-shadow: inset 0 0 0 1px var(--foreground);
}

/* Background art is a compact three-part control: solid, pattern, texture. */
.background-art-panel {
  display: grid;
  gap: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.background-art-group {
  display: grid;
  gap: 7px;
}

.background-art-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.background-art-heading > span {
  color: var(--foreground);
  font-size: 10px;
  font-weight: 750;
}

.background-art-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.background-art-choice {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--foreground);
  background: var(--background);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.background-art-choice {
  display: grid;
  min-height: 43px;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  text-align: left;
}

.background-art-choice > span:last-child {
  overflow: hidden;
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.background-art-choice:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--background) 94%, var(--muted));
}

.background-art-choice.is-selected {
  border-color: var(--foreground);
  box-shadow: inset 0 0 0 1px var(--foreground);
}

.background-art-choice:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.background-art-preview {
  position: relative;
  display: block;
  width: 24px;
  height: 30px;
  overflow: hidden;
  border: 1px solid rgb(36 42 48 / .12);
  border-radius: var(--radius-sm);
  background-color: #f5f1ea;
}

.background-art-preview--solid::after {
  position: absolute;
  right: 3px;
  bottom: 4px;
  left: 3px;
  height: 1px;
  background: rgb(36 42 48 / .34);
  content: "";
  transform: rotate(-14deg);
}

.background-art-preview--dots {
  background-color: #eee6f1;
  background-image: radial-gradient(circle, #687b96 0 1.15px, transparent 1.35px);
  background-position: 2px 2px;
  background-size: 6px 6px;
}

.background-art-preview--halftone {
  background-color: #fbfdff;
  background-image:
    repeating-linear-gradient(90deg, rgb(133 183 224 / .48) 0 6px, transparent 6px 16px),
    repeating-linear-gradient(0deg, rgb(133 183 224 / .48) 0 6px, transparent 6px 16px);
  background-size: 16px 16px;
}

.background-art-preview--bitmap {
  background-color: #fff8c8;
  background-image:
    linear-gradient(45deg, #a9d2f5 25%, transparent 25%, transparent 75%, #a9d2f5 75%),
    linear-gradient(45deg, #a9d2f5 25%, transparent 25%, transparent 75%, #a9d2f5 75%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}

.background-art-preview--collage {
  overflow: hidden;
  border-color: #7d6149;
  background:
    linear-gradient(156deg, transparent 0 18%, #dfc29b 18% 36%, transparent 36% 48%, #5e5045 48% 74%, transparent 74%),
    linear-gradient(24deg, #b68a5d 0 28%, transparent 28% 100%),
    #d1ae80;
  background-image:
    radial-gradient(circle at 22% 76%, rgb(74 55 42 / .28) 0 .7px, transparent 1px),
    linear-gradient(156deg, transparent 0 18%, #dfc29b 18% 36%, transparent 36% 48%, #5e5045 48% 74%, transparent 74%),
    linear-gradient(24deg, #b68a5d 0 28%, transparent 28% 100%);
}

.background-art-preview--collage::before,
.background-art-preview--collage::after {
  position: absolute;
  display: block;
  content: "";
}

.background-art-preview--collage::before {
  top: 4px;
  left: 3px;
  width: 18px;
  height: 18px;
  border: 1px solid rgb(92 66 43 / .3);
  background: #f4e6d0;
  box-shadow: 8px 10px 0 -1px #a7754e, 10px 10px 0 0 rgb(246 230 201 / .48);
  clip-path: polygon(4% 0, 100% 4%, 94% 29%, 100% 54%, 92% 100%, 56% 94%, 25% 100%, 0 89%, 5% 58%, 0 27%);
  transform: rotate(-7deg);
}

.background-art-preview--collage::after {
  right: 2px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  border: 1px solid rgb(255 242 222 / .72);
  border-radius: 50%;
  background: #7f443c;
  box-shadow: -16px -19px 0 -3px #ead0a8;
}

.background-art-preview--scrapbook {
  border-color: #7199a4;
  background:
    linear-gradient(146deg, transparent 0 24%, #b6d4d8 24% 46%, transparent 46% 61%, #dce8e2 61% 83%, transparent 83%),
    linear-gradient(28deg, #eef3ef 0 40%, transparent 40% 100%),
    #dbeaed;
  background-image:
    linear-gradient(90deg, transparent 0 70%, rgb(67 111 124 / .2) 70% 72%, transparent 72%),
    linear-gradient(146deg, transparent 0 24%, #b6d4d8 24% 46%, transparent 46% 61%, #dce8e2 61% 83%, transparent 83%),
    linear-gradient(28deg, #eef3ef 0 40%, transparent 40% 100%);
}

.background-art-preview--scrapbook::before,
.background-art-preview--scrapbook::after {
  position: absolute;
  display: block;
  content: "";
}

.background-art-preview--scrapbook::before {
  top: 6px;
  left: 5px;
  width: 17px;
  height: 20px;
  border: 1px solid rgb(65 100 111 / .24);
  background: #f8faf4;
  box-shadow: 10px 12px 0 -1px #a9c8cc;
  clip-path: polygon(0 4%, 100% 0, 96% 26%, 100% 55%, 94% 100%, 52% 95%, 18% 100%, 3% 86%, 6% 48%);
  transform: rotate(5deg);
}

.background-art-preview--scrapbook::after {
  top: 2px;
  right: 2px;
  width: 15px;
  height: 5px;
  background: rgb(74 137 153 / .58);
  box-shadow: -8px 22px 0 -1px #8fb9b4;
  transform: rotate(11deg);
}

/* Pattern swatches use one-color ink when the option describes a repeatable
   motif. Material patterns keep their paper colors so the two editorial
   surfaces remain distinguishable at a glance. */
:where(
  .background-art-preview--dots,
  .background-art-preview--stars,
  .background-art-preview--halftone,
  .background-art-preview--bitmap
) {
  --pattern-preview-paper: var(--card);
  --pattern-preview-ink: color-mix(in oklch, var(--foreground) 78%, transparent);
  --pattern-preview-ink-strong: color-mix(in oklch, var(--foreground) 92%, transparent);
  --pattern-preview-ink-soft: color-mix(in oklch, var(--foreground) 42%, transparent);
  --pattern-preview-line: color-mix(in oklch, var(--foreground) 22%, var(--card));
  border-color: var(--pattern-preview-line);
  background-color: var(--pattern-preview-paper);
}

.background-art-preview--dots {
  background-image: radial-gradient(circle, var(--pattern-preview-ink-strong) 0 1.15px, transparent 1.35px);
}

.background-art-preview--halftone {
  background-image:
    repeating-linear-gradient(90deg, var(--pattern-preview-ink-soft) 0 6px, transparent 6px 16px),
    repeating-linear-gradient(0deg, var(--pattern-preview-ink-soft) 0 6px, transparent 6px 16px);
}

.background-art-preview--bitmap {
  background-image:
    linear-gradient(45deg, var(--pattern-preview-ink) 25%, transparent 25%, transparent 75%, var(--pattern-preview-ink) 75%),
    linear-gradient(45deg, var(--pattern-preview-ink) 25%, transparent 25%, transparent 75%, var(--pattern-preview-ink) 75%);
}

@media (max-width: 560px) {
  .background-art-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* M3-inspired inspector grouping: the art panel exposes only the three direct
   background axes and remains compact enough to scan. */
.style-current-label {
  max-width: 132px;
  overflow: hidden;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-foreground);
  background: var(--muted);
  font-size: 8px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.style-current-label[data-custom="true"] {
  color: var(--foreground);
  border-color: color-mix(in oklch, var(--primary) 28%, var(--border));
  background: color-mix(in oklch, var(--primary) 8%, var(--muted));
}

.background-art-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 1px;
}

.background-art-panel-head > span {
  color: var(--foreground);
  font-size: 10px;
  font-weight: 750;
}

.background-art-choice {
  border-radius: var(--radius-sm);
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.background-art-choice:hover {
  transform: translateY(-1px);
}

.background-art-choice.is-selected {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 6%, var(--background));
  box-shadow: inset 0 0 0 1px var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .background-art-choice {
    transition: none;
  }
}

/* Image panel visual system: one control height, one state language, and
   motion only where the user's action changes the image workflow. */
.portrait-section {
  --image-control-height: 36px;
  --image-control-gap: 6px;
}

.portrait-section .panel-section-head {
  align-items: center;
}

.portrait-section .panel-section-head h2 {
  letter-spacing: -.02em;
}

.image-state {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-foreground);
  background: var(--muted);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.image-state[data-state="cutout"] {
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border));
  color: var(--foreground);
  background: color-mix(in oklch, var(--primary) 10%, var(--muted));
  animation: image-state-pop 260ms cubic-bezier(.16, 1, .3, 1) both;
}

.portrait-source-card {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.portrait-source-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 5px 16px rgb(20 24 28 / .06);
  transform: translateY(-1px);
}

.portrait-source-card.is-empty:hover {
  border-color: var(--border);
  box-shadow: none;
  transform: none;
}

.source-thumb {
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.source-thumb.is-cutout {
  border-color: color-mix(in oklch, var(--primary) 42%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 22%, transparent);
}

.source-thumb.is-cutout::after {
  animation: image-badge-in 220ms cubic-bezier(.16, 1, .3, 1) both;
}

.image-fit-row,
.image-transform-row,
.image-position-row {
  min-height: var(--image-control-height);
}

.image-fit-row > span,
.image-transform-row > span,
.image-position-row > span {
  display: flex;
  min-height: var(--image-control-height);
  align-items: center;
}

.portrait-section .compact-segments button {
  min-height: var(--image-control-height);
}

.image-zoom-controls,
.image-nudge-grid {
  gap: var(--image-control-gap);
}

.image-zoom-controls button,
.image-nudge-grid button {
  min-height: var(--image-control-height);
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.image-zoom-controls button:hover,
.image-nudge-grid button:hover {
  box-shadow: 0 2px 7px rgb(20 24 28 / .07);
  transform: translateY(-1px);
}

.image-zoom-controls button:active,
.image-nudge-grid button:active {
  box-shadow: none;
  transform: scale(.97);
}

.cutout-action {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 160ms ease;
}

.cutout-action > * {
  position: relative;
  z-index: 1;
}

.cutout-action:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgb(20 24 28 / .07);
  transform: translateY(-1px);
}

.cutout-action.is-processing {
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border));
  background: color-mix(in oklch, var(--primary) 9%, var(--muted));
  cursor: progress;
}

.cutout-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -42%;
  z-index: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--primary) 18%, transparent), transparent);
  pointer-events: none;
  opacity: 0;
}

.cutout-action.is-processing .cutout-progress {
  opacity: 1;
  animation: cutout-progress 1.25s ease-in-out infinite;
}

@keyframes image-state-pop {
  from { opacity: .45; transform: translateY(-3px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes image-badge-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cutout-progress {
  from { transform: translateX(0); }
  to { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  .image-state[data-state="cutout"],
  .source-thumb.is-cutout::after,
  .cutout-action.is-processing .cutout-progress {
    animation: none;
  }

  .portrait-source-card,
  .image-state,
  .source-thumb,
  .image-zoom-controls button,
  .image-nudge-grid button,
  .cutout-action {
    transition: none;
  }
}

/* Equipment panel visual system: one selection language across characters,
   slots, and search results, with motion reserved for feedback. */
.item-character-section,
.equipment-section,
.catalog-section {
  --equipment-control-gap: 6px;
}

.item-character-selector,
.equipment-section .equipment-list,
.catalog-section .catalog-results {
  gap: var(--equipment-control-gap);
}

.item-character-button,
.equipment-section .equipment-row,
.catalog-section .catalog-result {
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.item-character-button:hover:not(:disabled),
.equipment-section .equipment-row:hover:not(:disabled),
.catalog-section .catalog-result:hover:not(:disabled) {
  transform: translateY(-1px);
}

.item-character-button {
  min-height: 44px;
}

.item-character-button.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 4px 12px color-mix(in oklch, var(--primary) 9%, transparent);
}

.item-character-button.is-selected .item-character-thumb {
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 42%, transparent);
}

.equipment-section .equipment-row.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 4px 12px color-mix(in oklch, var(--primary) 9%, transparent);
}

.equipment-section .equipment-row.is-empty {
  border-style: dashed;
}

.equipment-section .equipment-row.is-empty .equipment-icon {
  border: 1px dashed var(--border);
  background: transparent;
}

.equipment-section .equipment-check {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--muted);
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.equipment-section .equipment-row:hover .equipment-check {
  border-color: var(--primary);
}

.equipment-section .equipment-row.is-empty .equipment-check {
  border-style: dashed;
}

.equipment-section .equipment-row.is-selected .equipment-check {
  border-color: var(--primary);
  color: var(--primary-foreground);
  background: var(--primary);
}

.catalog-section .catalog-result-action {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.catalog-section .catalog-result:hover .catalog-result-action {
  transform: translateX(2px);
}

.catalog-progress {
  display: block;
  width: 100%;
  height: 2px;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent) 0 0 / 200% 100%;
  animation: catalog-progress 1.1s ease-in-out infinite;
}

@keyframes catalog-progress {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .item-character-button,
  .equipment-section .equipment-row,
  .equipment-section .equipment-check,
  .catalog-section .catalog-result,
  .catalog-section .catalog-result-action {
    transition: none;
  }

  .item-character-button:hover:not(:disabled),
  .equipment-section .equipment-row:hover:not(:disabled),
  .catalog-section .catalog-result:hover:not(:disabled),
  .catalog-section .catalog-result:hover .catalog-result-action {
    transform: none;
  }

  .catalog-progress {
    animation: none;
  }
}

/* Simplified background contract: one solid, one print pattern, one texture. */
.background-solid-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 0;
}

.backdrop-swatch {
  display: grid;
  min-width: 0;
  min-height: 43px;
  aspect-ratio: auto;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--foreground);
  background: var(--background);
  text-align: left;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.backdrop-swatch > span:last-child {
  overflow: hidden;
  max-width: 100%;
  font-size: 8px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backdrop-swatch[data-background="ink"],
.backdrop-swatch[data-background="charcoal"] {
  color: var(--foreground);
}

.backdrop-swatch:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--background) 94%, var(--muted));
  transform: translateY(-1px);
}

.backdrop-swatch.is-selected {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 6%, var(--background));
  box-shadow: inset 0 0 0 1px var(--primary), 0 3px 9px color-mix(in oklch, var(--primary) 9%, transparent);
}

.backdrop-swatch .background-art-preview--solid {
  background: var(--backdrop);
}

.custom-background-control {
  display: grid;
  grid-template-columns: auto 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--background) 92%, var(--muted));
}

.custom-background-control[hidden] {
  display: none;
}

.custom-background-control > label {
  color: var(--muted-foreground);
  font-size: 9px;
  font-weight: 750;
}

.custom-background-control input[type="color"] {
  width: 34px;
  height: 27px;
  padding: 2px;
  border: 1px solid var(--foreground);
  border-radius: 999px;
  background: var(--background);
  cursor: pointer;
}

.custom-background-control input[type="color"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.custom-background-control output {
  overflow: hidden;
  min-width: 0;
  color: var(--muted-foreground);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backdrop-swatch.is-selected::after,
.background-art-preview--solid::after {
  display: none;
}

.background-art-preview--dots,
.background-art-preview--stars,
.background-art-preview--halftone,
.background-art-preview--bitmap {
  background-color: var(--pattern-preview-paper);
}

.background-art-preview--stars::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  background: var(--pattern-preview-ink);
  content: "";
  clip-path: polygon(50% 0, 61.8% 34.5%, 97.5% 34.5%, 68.5% 55.5%, 79.5% 90.5%, 50% 69%, 20.5% 90.5%, 31.5% 55.5%, 2.5% 34.5%, 38.2% 34.5%);
  box-shadow: none;
  transform: translate(-50%, -50%) rotate(-6deg);
}

.background-art-preview--stars::after {
  display: none;
}

.background-texture-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.background-art-preview--texture-none {
  background: #f7f5f0;
}

.background-art-preview--texture-grain {
  background-color: #f1d6d5;
  background-image:
    radial-gradient(circle at 15% 22%, rgb(112 72 80 / .33) 0 .6px, transparent .9px),
    radial-gradient(circle at 70% 34%, rgb(255 255 255 / .75) 0 .8px, transparent 1px),
    radial-gradient(circle at 38% 78%, rgb(112 72 80 / .22) 0 .65px, transparent 1px);
  background-size: 7px 9px, 9px 8px, 11px 10px;
}

.background-art-preview--texture-risograph {
  background-color: #f1e3d6;
  background-image:
    radial-gradient(circle, rgb(89 82 111 / .64) 0 .9px, transparent 1.35px),
    radial-gradient(circle, rgb(209 126 113 / .45) 0 .8px, transparent 1.25px);
  background-position: 0 0, 2px 1px;
  background-size: 6px 6px, 7px 7px;
}

.background-art-preview--texture-dust {
  background-color: #f3eee5;
  background-image:
    radial-gradient(circle at 15% 18%, rgb(71 63 69 / .72) 0 .8px, transparent 1.5px),
    radial-gradient(circle at 74% 34%, rgb(71 63 69 / .5) 0 .6px, transparent 1.25px),
    radial-gradient(circle at 36% 72%, rgb(255 255 255 / .9) 0 1px, transparent 1.65px),
    repeating-linear-gradient(18deg, transparent 0 13px, rgb(71 63 69 / .22) 13px 13.7px, transparent 13.7px 29px);
}

.background-art-preview--texture-fiber {
  background-color: #f2ede4;
  background-image:
    repeating-linear-gradient(92deg, rgb(104 93 86 / .33) 0 .55px, transparent .55px 6px),
    repeating-linear-gradient(5deg, rgb(255 255 255 / .72) 0 .5px, transparent .5px 8px);
  background-size: 8px 12px, 11px 9px;
}

.background-art-preview--texture-halftone {
  background-color: #fafafa;
  background-image: radial-gradient(circle, rgb(51 55 60 / .76) 0 .85px, transparent 1.35px);
  background-position: 1px 1px;
  background-size: 5px 5px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 42%, rgb(0 0 0 / .78) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, rgb(0 0 0 / .78) 100%);
}

/* Texture swatches are samples, not miniature colour presets. A shared paper
   ground makes the material mark itself legible at 24px, and keeps selecting
   a texture visually separate from selecting a coloured background. */
.background-texture-choice .background-art-preview {
  --texture-preview-paper: var(--card);
  --texture-preview-ink: color-mix(in oklch, var(--foreground) 54%, transparent);
  --texture-preview-ink-strong: color-mix(in oklch, var(--foreground) 76%, transparent);
  --texture-preview-ink-soft: color-mix(in oklch, var(--foreground) 30%, transparent);
  border-color: color-mix(in oklch, var(--foreground) 22%, var(--card));
  background-color: var(--texture-preview-paper);
  mask-image: none;
  -webkit-mask-image: none;
}

.background-texture-choice .background-art-preview--texture-none {
  background: var(--texture-preview-paper);
}

.background-texture-choice .background-art-preview--texture-grain {
  background-color: var(--texture-preview-paper);
  background-image:
    radial-gradient(circle, var(--texture-preview-ink-strong) 0 .55px, transparent .85px),
    radial-gradient(circle, var(--texture-preview-ink-soft) 0 .7px, transparent 1px);
  background-position: 0 0, 2px 3px;
  background-size: 5px 6px, 8px 9px;
}

.background-texture-choice .background-art-preview--texture-risograph {
  background-color: var(--texture-preview-paper);
  background-image:
    radial-gradient(circle, var(--texture-preview-ink-strong) 0 .9px, transparent 1.35px),
    radial-gradient(circle, var(--texture-preview-ink-soft) 0 .8px, transparent 1.25px);
  background-position: 0 0, 2px 1px;
  background-size: 6px 6px, 7px 7px;
}

.background-texture-choice .background-art-preview--texture-dust {
  background-color: var(--texture-preview-paper);
  background-image:
    radial-gradient(circle at 15% 18%, var(--texture-preview-ink-strong) 0 1px, transparent 1.55px),
    radial-gradient(circle at 74% 34%, var(--texture-preview-ink) 0 .75px, transparent 1.35px),
    radial-gradient(circle at 36% 72%, var(--texture-preview-ink-soft) 0 1px, transparent 1.7px),
    repeating-linear-gradient(18deg, transparent 0 13px, var(--texture-preview-ink-soft) 13px 13.8px, transparent 13.8px 29px);
}

.background-texture-choice .background-art-preview--texture-fiber {
  background-color: var(--texture-preview-paper);
  background-image:
    repeating-linear-gradient(92deg, var(--texture-preview-ink) 0 .65px, transparent .65px 6px),
    repeating-linear-gradient(5deg, var(--texture-preview-ink-soft) 0 .65px, transparent .65px 8px);
  background-size: 8px 12px, 11px 9px;
}

.background-texture-choice .background-art-preview--texture-halftone {
  background-color: var(--texture-preview-paper);
  background-image: radial-gradient(circle, var(--texture-preview-ink-strong) 0 .9px, transparent 1.35px);
  background-position: 1px 1px;
  background-size: 5px 5px;
}

.background-art-choice:focus-visible,
.backdrop-swatch:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .background-solid-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop-swatch {
    transition: none;
  }
}


/* Typography and preset controls: keep the card-setting section on the same
   compact height, radius, and primary selection language as the other axes. */
.title-font-option-row select {
  min-height: 36px;
  border-color: var(--muted-foreground);
  border-radius: var(--radius-sm);
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.title-font-option-row select:hover {
  border-color: var(--line-strong);
  background: var(--muted);
}

.title-weight-option {
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.title-weight-option:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--background) 94%, var(--muted));
  transform: translateY(-1px);
}

.title-weight-option.is-selected {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 6%, var(--background));
  box-shadow: inset 0 0 0 1px var(--primary), 0 3px 9px color-mix(in oklch, var(--primary) 9%, transparent);
}

.style-advanced-toggle {
  min-height: 36px;
  padding-inline: 4px;
  border-top-color: var(--border);
  border-radius: var(--radius-sm);
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.style-advanced-toggle:hover,
.style-advanced-toggle[aria-expanded="true"] {
  border-top-color: var(--primary);
  color: var(--foreground);
  background: color-mix(in oklch, var(--primary) 5%, var(--background));
}

.style-advanced-icon {
  transition: transform 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .title-font-option-row select,
  .title-weight-option,
  .style-advanced-toggle,
  .style-advanced-icon {
    transition: none;
  }

  .title-weight-option:hover:not(:disabled) {
    transform: none;
  }
}

/* Card copy editor: a stable writing surface for long titles and descriptions.
   The canvas remains a direct-manipulation preview, while these fields keep
   the full draft readable at every inspector width. Keep the authoring tools
   on the inspector surface instead of turning them into a nested card. */
.copy-editor-section {
  display: grid;
  gap: 14px;
  background: transparent;
}

/* Copy and title typography are one authoring task. Keep the font controls
   directly below the fields instead of burying them in card background
   settings. */
.copy-editor-typography {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.copy-editor-typography-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.copy-editor-typography-head > span {
  color: var(--foreground);
  font-size: 10px;
  font-weight: 700;
}

.copy-editor-typography .title-font-control {
  gap: 8px;
}

.copy-editor-typography .title-weight-row {
  grid-template-columns: 34px minmax(0, 1fr);
}

.copy-editor-fields {
  display: grid;
  gap: 12px;
}

.copy-editor-field {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 6px;
}

.copy-editor-field > span {
  color: var(--muted-foreground);
  font-size: 10px;
  font-weight: 700;
}

.copy-editor-field input,
.copy-editor-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--muted-foreground);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  color: var(--foreground);
  background: var(--background);
  font: 500 12px/1.45 var(--sans);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.copy-editor-field input {
  min-height: 40px;
}

.copy-editor-field textarea {
  min-height: 68px;
  max-height: 180px;
  resize: vertical;
  overflow: auto;
}

.copy-editor-field input:hover,
.copy-editor-field textarea:hover {
  border-color: var(--line-strong);
}

.copy-editor-field input:focus-visible,
.copy-editor-field textarea:focus-visible {
  border-color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 14%, transparent);
}

.copy-editor-count {
  justify-self: end;
  color: var(--muted-foreground);
  font: 500 9px/1 var(--mono);
}

.copy-editor-hint {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .copy-editor-field input,
  .copy-editor-field textarea {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .copy-editor-field input,
  .copy-editor-field textarea {
    transition: none;
  }
}

/* Image placement: fast coarse control plus precise, accessible ranges. */
.image-transform-control,
.image-position-control {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.image-position-sliders {
  display: grid;
  gap: 6px;
}

.image-position-slider {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--muted-foreground);
  font-size: 9px;
}

.image-position-slider output {
  color: var(--foreground);
  font: 650 9px/1 var(--mono);
  text-align: right;
  white-space: nowrap;
}

.image-position-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.image-center-button {
  min-width: 48px;
  min-height: var(--image-control-height);
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--foreground);
  background: var(--background);
  font-size: 9px;
  font-weight: 700;
}

.image-center-button:hover {
  border-color: var(--line-strong);
  background: var(--muted);
}

.image-transform-control input[type="range"]:focus-visible,
.image-position-slider input[type="range"]:focus-visible,
.image-center-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .image-position-slider {
    grid-template-columns: 30px minmax(0, 1fr) 54px;
  }

  .image-position-actions {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-center-button {
    transition: none;
  }
}

/* Put the high-attention placement work in one focused surface. */
.image-placement-launch-row {
  min-height: var(--image-control-height);
}


.image-placement-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.image-placement-summary output {
  overflow: hidden;
  color: var(--foreground);
  font: 650 10px/1 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-placement-launch {
  min-height: var(--image-control-height);
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--foreground);
  background: var(--background);
  font-size: 10px;
  font-weight: 750;
}

.image-placement-launch:hover {
  border-color: var(--primary);
  background: var(--muted);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--primary) 12%, transparent);
  transform: translateY(-1px);
}

/* Inspector image flow ---------------------------------------------------
   The order mirrors the user's task: inspect the current source, choose its
   frame, place it on the card, then run the optional cutout action. */
.portrait-section .image-fit-row {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.portrait-section .image-placement-launch-row {
  padding-top: 2px;
}

.portrait-section .cutout-action {
  min-height: 42px;
  margin-top: 0;
}

/* Image placement dock ---------------------------------------------------
   The card remains the working surface while this dock owns one edit
   transaction. Keep the layout in one seam so size, position, and commit
   controls do not drift apart across viewport breakpoints. */
.image-editor-dialog.image-editor-modebar {
  --placement-dock-gap: 14px;
  --muted-foreground: var(--chart-3);
  position: fixed;
  z-index: 80;
  right: auto;
  bottom: 14px;
  left: 50%;
  display: block;
  box-sizing: border-box;
  width: min(1040px, calc(100vw - 32px));
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  background: color-mix(in oklch, var(--background) 97%, var(--muted));
  box-shadow: 0 18px 48px rgb(16 24 40 / .22), 0 2px 8px rgb(16 24 40 / .08);
  transform: translateX(-50%);
}

.image-editor-modebar .image-editor-dialog-shell {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: minmax(150px, .78fr) minmax(260px, 1.4fr) minmax(215px, 1fr) auto;
  grid-template-rows: auto;
  grid-template-areas: "head size position footer";
  align-items: center;
  column-gap: var(--placement-dock-gap);
  max-height: none;
  padding: 12px 14px;
}

.image-editor-modebar .image-editor-dialog-header {
  grid-area: head;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
}

.image-editor-modebar .image-editor-dialog-header > div {
  min-width: 0;
}

.image-editor-modebar .dialog-kicker {
  display: block;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-editor-modebar .image-editor-dialog-header h2 {
  margin: 3px 0 0;
  overflow: hidden;
  font-size: 13px;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-editor-modebar .image-editor-dialog-header p {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.image-editor-modebar .image-editor-close {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  background: var(--background);
  font-size: 16px;
  line-height: 1;
}

.image-editor-modebar .image-editor-dialog-body,
.image-editor-modebar .image-editor-dialog-controls {
  display: contents;
}

.image-editor-modebar .image-editor-control-group {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.image-editor-modebar .image-editor-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.image-editor-modebar .image-editor-control-group:first-child {
  grid-area: size;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  gap: 8px;
}

.image-editor-modebar .image-editor-control-group:first-child .image-editor-control-head {
  grid-column: 1;
  grid-row: 1;
  justify-content: flex-start;
  gap: 8px;
  white-space: nowrap;
}

.image-editor-modebar .image-editor-control-group:first-child .image-editor-range-label {
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
}

.image-editor-modebar .image-editor-control-group:first-child .image-zoom-controls {
  position: static;
  grid-column: 3;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  gap: 0;
}

.image-editor-modebar #zoomIn,
.image-editor-modebar #zoomOut {
  display: none;
}

.image-editor-modebar .image-editor-control-head h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: .01em;
}

.image-editor-modebar .image-editor-control-head .zoom-readout {
  margin-right: 0;
  color: var(--foreground);
  font: 650 11px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}

.image-editor-modebar .image-position-slider {
  grid-template-columns: 34px minmax(0, 1fr) 58px;
  font-size: 10px;
}

.image-editor-modebar .image-nudge-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.image-editor-modebar .image-nudge-grid button {
  min-height: 38px;
}

.image-editor-modebar .image-fit-button,
.image-editor-modebar .image-center-button {
  min-width: 48px;
  min-height: 32px;
  padding-inline: 10px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  white-space: nowrap;
}

.image-editor-modebar .image-editor-control-group:nth-child(2) {
  grid-area: position;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
  padding-left: var(--placement-dock-gap);
  border-left: 1px solid var(--border);
}

.image-editor-modebar .image-editor-control-group:nth-child(2) .image-editor-control-head {
  min-width: 0;
}

.image-editor-modebar .image-editor-precision {
  min-width: 0;
}

.image-editor-modebar .image-editor-precision summary {
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0 0;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 10px;
}

.image-editor-modebar .image-editor-precision summary::after {
  color: var(--foreground);
  content: "＋";
  font-size: 14px;
}

.image-editor-modebar .image-editor-precision[open] summary::after {
  content: "－";
}

.image-editor-modebar .image-editor-precision .image-position-sliders {
  margin: 2px 0 4px;
}

.image-editor-modebar .image-editor-dialog-footer {
  grid-area: footer;
  display: flex;
  align-self: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
  border: 0;
}

.image-editor-modebar .image-editor-dialog-footer button {
  width: auto;
  flex: 0 0 auto;
  min-width: 68px;
  min-height: 34px;
  margin-top: 0;
  padding-inline: 12px;
}

@media (max-width: 860px) and (min-width: 681px) {
  .image-editor-modebar .image-editor-dialog-shell {
    grid-template-columns: minmax(145px, .8fr) minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "head size footer"
      "position position footer";
    row-gap: 10px;
  }

  .image-editor-modebar .image-editor-control-group:nth-child(2) {
    padding-top: 9px;
    padding-left: 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

@media (max-width: 680px) {
  .image-editor-dialog.image-editor-modebar {
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    max-height: min(72dvh, 520px);
    transform: none;
  }

  .image-editor-modebar .image-editor-dialog-shell {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "head head"
      "size size"
      "position position"
      "footer footer";
    row-gap: 10px;
    max-height: min(72dvh, 520px);
    padding: 10px 12px;
    overflow: auto;
  }

  .image-editor-modebar .image-editor-control-group:first-child {
    grid-template-columns: auto minmax(120px, 1fr) auto;
  }

  .image-editor-modebar .image-editor-control-group:nth-child(2) {
    padding-top: 9px;
    padding-left: 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .image-editor-modebar .image-editor-dialog-footer {
    padding-top: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-editor-dialog.image-editor-modebar,
  .image-editor-modebar .image-editor-close {
    transition: none;
  }
}
/* Title outline is a glyph treatment, so it lives with copy controls and
   shares the same compact control rhythm as title typography. */
.copy-editor-title-outline {
  display: grid;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.copy-editor-title-outline .copy-editor-typography-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.copy-editor-title-outline .copy-editor-typography-head span {
  color: var(--foreground);
  font-size: 10px;
  font-weight: 650;
}

.copy-editor-title-outline .copy-editor-typography-head small {
  color: var(--muted-foreground);
  font-family: var(--mono);
  font-size: 9px;
}

.title-outline-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.title-outline-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
}

.title-outline-swatch {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06);
  cursor: pointer;
}

.title-outline-swatch.is-selected {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.title-outline-swatch:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.title-outline-range,
.title-outline-range input {
  display: block;
  width: 100%;
  min-width: 0;
}

.title-outline-range input[type="range"] {
  height: 40px;
  margin: 0;
  accent-color: var(--primary);
}

.equipment-section .equipment-row.is-selected .equipment-icon {
  border-color: var(--primary);
  color: var(--primary-foreground);
  background: var(--primary);
}

.source-thumb.is-empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  background: var(--muted);
}

.source-thumb.is-empty::after {
  color: var(--muted-foreground);
  content: "미리보기";
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
}

.source-thumb.is-empty img {
  display: none;
}

.item-character-thumb.is-empty {
  display: grid;
  place-items: center;
  border-style: dashed;
}

.item-character-empty {
  padding: 4px;
  color: var(--muted-foreground);
  font-family: var(--sans);
  font-size: 8px;
  line-height: 1.15;
  text-align: center;
}

.cast-empty-thumb {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--muted-foreground);
  font-size: 15px;
}

/* Editing typography and navigation use one readable rhythm. */
.inspector .panel-section-head h2 { font-size: 16px; line-height: 1.5; font-weight: 750; letter-spacing: -.035em; }
.inspector .inspector-section { padding-block: 20px; scroll-margin-block-start: 64px; }
.inspector :is(.panel-eyebrow, .panel-state, .panel-selection-summary,
  .source-copy span, .image-state, .copy-editor-hint,
  .copy-editor-count, .copy-editor-field > span,
  .title-weight-option small, .title-weight-label, .background-art-heading span,
  .background-art-choice span, .backdrop-swatch > span:last-child,
  .compact-control-hint,
  .compact-option-row > span) { font-size: 12px; line-height: 1.5; }
.inspector :is(.copy-editor-typography-head span, .compact-segments button,
  .cast-count-control button, .image-placement-launch, .cutout-action) { font-size: 13px; line-height: 1.5; }
.inspector :is(.compact-segments button, .cast-count-control button) { min-height: 36px; }
.inspector :is(.copy-editor-field textarea, .title-font-control select) { font-size: 14px; line-height: 1.6; }
.compact-control-hint[data-ready="true"] { display: none; }
.editor-category-section {
  border-top: 1px solid var(--border);
}
.editor-category-section .panel-section-head {
  min-height: 32px;
}
.editor-category-section .panel-section-head h2 {
  color: var(--foreground);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.02em;
}

/* Empty cast slots are actions, not miniature portrait cards. Keep the
   target compact and let the circular affordance carry the empty state. */
.cast-selector {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.cast-selector button {
  display: grid;
  grid-template-rows: 40px auto;
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: 64px;
  aspect-ratio: auto;
  overflow: visible;
  padding: 6px 2px 5px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  background: transparent;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.cast-selector button:hover,
.cast-selector button:focus-visible {
  color: var(--foreground);
  background: var(--muted);
}
.cast-selector button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.cast-selector button.is-selected {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.cast-selector button::after { display: none; content: none; }
.cast-selector .cast-slot-visual {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  overflow: hidden;
  position: static;
  top: auto;
  left: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: inherit;
  background: var(--background);
  font-size: inherit;
  font-weight: inherit;
}
.cast-selector .cast-slot-visual:not(.is-empty) {
  border-radius: var(--radius-sm);
}
.cast-selector button.is-selected .cast-slot-visual {
  border-color: var(--foreground);
  box-shadow: 0 0 0 1px var(--foreground);
}
.cast-selector img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: .92;
}
.cast-selector button.is-selected img { opacity: 1; }
.cast-selector .cast-empty-thumb {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  position: static;
  top: auto;
  left: auto;
  padding: 0;
  border: 0;
  border-radius: inherit;
  color: var(--foreground);
  background: transparent;
  font: 500 21px/1 var(--sans);
}
.cast-selector .cast-slot-index {
  position: static;
  padding: 0;
  color: inherit;
  background: transparent;
  font: 700 10px/1 var(--mono);
  letter-spacing: .04em;
}
@media (prefers-reduced-motion: reduce) {
  .cast-selector button { transition: none; }
}

/* Card output settings stay with card styling. The equipment panel edits the
   source data; this row controls whether that data is printed on lineup cards. */
.card-display-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-block: 14px;
  border-block: 1px solid var(--border);
}

.card-display-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.card-display-copy > span {
  color: var(--foreground);
  font-size: 13px;
  font-weight: 750;
}

.card-display-switch {
  min-height: 36px;
  flex: 0 0 auto;
}

.card-display-switch b {
  color: var(--foreground);
  font-size: 12px;
}

.card-display-control[hidden] { display: none; }

/* Shared disclosure grammar: collapsed style controls and precise placement
   controls should expose the same 36px row, divider, and state affordance. */
.style-advanced-toggle,
.image-editor-modebar .image-editor-precision summary {
  min-height: 36px;
  padding: 0 4px;
  border-top: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  font: 700 11px/1.4 var(--sans);
}

.style-advanced-toggle:hover,
.style-advanced-toggle[aria-expanded="true"],
.image-editor-modebar .image-editor-precision summary:hover,
.image-editor-modebar .image-editor-precision[open] summary {
  border-top-color: var(--primary);
  color: var(--foreground);
  background: color-mix(in oklch, var(--primary) 5%, var(--background));
}

.image-editor-modebar .image-editor-precision summary::-webkit-details-marker {
  display: none;
}

.image-editor-modebar .image-editor-precision summary::after {
  color: var(--foreground);
  font-size: 15px;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .style-advanced-toggle,
  .image-editor-modebar .image-editor-precision summary { transition: none; }
}

@media (min-width: 681px) {
  .image-editor-modebar .image-editor-dialog-shell { padding-block: 7px; }
}

.outfit-icon { display: block; width: 24px; height: 24px; }
/* An assigned slot keeps selection/change on the row and exposes removal as
   a sibling action. The sibling avoids nested interactive controls while
   keeping the destructive action visibly adjacent to the selected item. */
.equipment-section .equipment-row-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: var(--equipment-control-gap, 6px);
  min-width: 0;
}

.equipment-section .equipment-row-shell .equipment-row {
  width: 100%;
  min-width: 0;
}

.equipment-section .equipment-remove {
  display: inline-flex;
  min-width: 52px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  background: var(--background);
  font: 600 11px/1.4 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.equipment-section .equipment-remove:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  color: var(--foreground);
  background: var(--muted);
}

.equipment-section .equipment-remove:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.equipment-section .equipment-icon.has-item-image,
.catalog-section .catalog-result-icon.has-item-image {
  padding: 2px;
  background: var(--background);
}

.equipment-section .equipment-row.is-selected .equipment-icon.has-item-image {
  background: var(--background);
  color: var(--foreground);
}

.equipment-section .equipment-icon .item-image,
.catalog-section .catalog-result-icon .item-image {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: inherit;
  object-fit: contain;
}

.equipment-section .equipment-icon .item-image-fallback,
.catalog-section .catalog-result-icon .item-image-fallback {
  display: none;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.equipment-section .equipment-icon.is-image-fallback .item-image,
.catalog-section .catalog-result-icon.is-image-fallback .item-image {
  display: none;
}

.equipment-section .equipment-icon.is-image-fallback .item-image-fallback,
.catalog-section .catalog-result-icon.is-image-fallback .item-image-fallback {
  display: flex;
}

@media (max-width: 920px) and (min-height: 600px) {
  .inspector .inspector-section {
    scroll-margin-top: calc(var(--mobile-inspector-header-height, 69px) + 8px);
  }
}

.equipment-copy .gear-name-translation {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

/* Image workflow ---------------------------------------------------------
   Keep importing, placing, processing, and image effects on one route so a
   user does not have to hunt through the background section for image-only
   controls. Each group has one short heading and one visual divider. */
.portrait-section .image-workflow-group {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.portrait-section .image-workflow-group + .image-workflow-group {
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in oklch, var(--border) 82%, transparent);
}

.image-workflow-head {
  display: flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.image-workflow-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.image-workflow-index {
  display: none;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted-foreground);
  background: var(--muted);
  font: 700 9px/1 var(--mono);
  letter-spacing: .04em;
}

.image-workflow-title > span:last-child {
  overflow: hidden;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portrait-section .portrait-source-card {
  margin-top: 0;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-3);
}

.image-placement-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface-3);
}

.image-placement-card .image-fit-row {
  margin: 0;
  padding: 10px 11px;
  border: 0;
}

.image-placement-card .image-placement-launch-row {
  min-height: var(--inspector-control-height);
  margin: 0;
  padding: 10px 11px;
  border-top: 1px solid var(--border);
}

.image-placement-card .compact-option-row > span {
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 700;
}

.image-placement-card .compact-segments {
  min-height: 38px;
  padding: 3px;
}

.image-placement-card .compact-segments button {
  min-height: 32px;
}

.image-placement-summary output {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.image-placement-launch {
  min-width: 96px;
  font-weight: 750;
}

/* Optional context belongs behind one consistent, keyboard-accessible help
   affordance. Keep the inspector quiet until a user asks for the detail. */
.control-help {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.control-help > summary {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted-foreground);
  background: var(--background);
  font: 750 12px/1 var(--sans);
  cursor: pointer;
  list-style: none;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.control-help > summary::-webkit-details-marker,
.control-help > summary::marker {
  display: none;
  content: "";
}

.control-help > summary:hover,
.control-help[open] > summary {
  border-color: var(--primary);
  color: var(--foreground);
  background: color-mix(in oklch, var(--primary) 7%, var(--background));
}

.control-help > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.control-help-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  box-sizing: border-box;
  width: min(280px, calc(100vw - 48px));
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--popover);
  box-shadow: 0 12px 28px rgb(0 0 0 / .14);
}

.control-help-popover p {
  margin: 0;
  color: var(--popover-foreground);
  font: 500 12px/1.55 var(--sans);
}

.control-help-popover p + p {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
}

.image-treatment-group .cutout-action {
  margin-top: 0;
}

.image-treatment-actions {
  display: grid;
  gap: 8px;
}

.image-treatment-group .cutout-action {
  min-height: var(--inspector-control-height);
  border-color: var(--primary);
  color: var(--primary-foreground);
  background: var(--primary);
  font-weight: 750;
}

.image-treatment-group .cutout-action:hover:not(:disabled) {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 88%, var(--foreground));
}

.image-treatment-group .cutout-action:disabled {
  border-color: var(--border);
  color: var(--muted-foreground);
  background: var(--muted);
}

.image-treatment-group .style-advanced-toggle {
  display: flex;
  min-height: var(--inspector-control-height);
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.image-treatment-group .style-advanced-toggle:hover,
.image-treatment-group .style-advanced-toggle[aria-expanded="true"] {
  border-color: var(--primary);
  border-top-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 5%, var(--card));
}

.image-treatment-group .style-advanced-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--foreground);
  background: var(--muted);
  font: 700 12px/1 var(--mono);
}

.image-treatment-group .image-style-control {
  display: grid;
  min-width: 0;
  gap: 9px;
  margin-top: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--muted);
}

.image-style-control[hidden] {
  display: none !important;
}

.image-style-control-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.image-style-control-head h3 {
  margin: 0;
  color: var(--foreground);
  font-size: 12px;
  font-weight: 700;
}

.image-style-field {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.image-style-field-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.image-style-field-head .control-label,
.image-style-field-head > span {
  overflow: hidden;
  color: var(--muted-foreground);
  font: 650 11px/1.3 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector .image-style-control .image-style-field-head .value-readout,
.inspector .image-style-control .image-style-field-head output {
  flex: 0 0 auto;
  color: var(--muted-foreground);
  font: 700 11px/1 var(--mono);
  letter-spacing: .02em;
}

.image-color-choice-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.image-style-control .range-line {
  margin-top: 0;
}

.image-style-control .swatch-row {
  min-width: 0;
  gap: 8px;
}

.inspector .image-style-control .swatch-row {
  flex: 1 1 auto;
}

.inspector .image-style-control .color-swatch,
.image-style-control .image-color-picker input[type="color"] {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
}

.inspector .image-style-control .color-swatch.is-selected {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--primary);
}

.image-color-picker {
  display: flex;
  min-width: 0;
  min-height: 40px;
  flex: 0 1 auto;
  align-items: center;
  gap: 7px;
  padding: 4px 9px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-foreground);
  background: var(--card);
  font: 650 11px/1.2 var(--sans);
  cursor: pointer;
}

.image-color-picker:hover,
.image-color-picker:focus-within,
.image-color-picker.is-selected {
  border-color: var(--primary);
  color: var(--foreground);
  background: color-mix(in oklch, var(--primary) 5%, var(--card));
}

.image-color-picker input[type="color"] {
  padding: 3px;
  border: 1px solid var(--border);
  background: var(--background);
  cursor: pointer;
}

.image-color-picker input[type="color"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.image-color-picker span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector .image-style-control .range-line,
.inspector .image-style-control .image-range-field > input[type="range"] {
  gap: 2px;
  margin: 0;
}

.inspector .image-style-control .range-labels {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted-foreground);
  font: 650 11px/1.3 var(--sans);
}

.image-style-control .shadow-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklch, var(--border) 82%, transparent);
}

.image-style-control .shadow-controls > .image-style-field-head {
  margin: 0;
}

.inspector .image-style-control .direction-pad {
  grid-template-columns: repeat(3, 32px);
  grid-template-rows: repeat(3, 32px);
  gap: 4px;
}

.inspector .image-style-control .direction-pad button {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  font: 650 12px/1 var(--sans);
}

.inspector .image-style-control .direction-center {
  margin: 8px;
}

/* Copy controls ---------------------------------------------------------- */
.copy-editor-contextbar {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.copy-editor-contextbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.copy-editor-context-title {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

.copy-editor-context-kicker {
  color: var(--muted-foreground);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .03em;
  white-space: nowrap;
}

.copy-editor-context-title strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copy-editor-card-focus {
  min-height: 34px;
  flex: 0 0 auto;
  padding-inline: 10px;
  border: 1px solid var(--border);
  border-radius: var(--inspector-pill-radius, 999px);
  color: var(--foreground);
  background: var(--muted);
  font: 650 11px/1 var(--sans);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.copy-editor-card-focus:hover {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 7%, var(--muted));
}

.copy-editor-card-focus:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.copy-editor-toolbar {
  display: grid;
  gap: 12px;
}

.copy-editor-contextbar .copy-editor-style-grid {
  grid-template-columns: 1fr;
  gap: 10px;
  padding-top: 0;
  border-top: 0;
}

.copy-editor-contextbar .copy-editor-style-field {
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
}

.copy-editor-contextbar .copy-editor-typography {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.copy-editor-contextbar .title-font-control {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.copy-editor-contextbar .title-font-control select {
  min-height: 40px;
}

.copy-editor-contextbar .title-alignment-controls button {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-inline: 6px;
}

.alignment-glyph {
  display: block;
  width: 16px;
  height: 14px;
  flex: 0 0 16px;
  color: currentColor;
  background:
    linear-gradient(currentColor, currentColor) left top / 16px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left 4px / 11px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left 8px / 16px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left 12px / 8px 2px no-repeat;
}

.alignment-glyph--center {
  background-position: center top, center 4px, center 8px, center 12px;
  background-size: 16px 2px, 12px 2px, 16px 2px, 10px 2px;
}

.alignment-glyph--right {
  background-position: right top, right 4px, right 8px, right 12px;
  background-size: 16px 2px, 10px 2px, 16px 2px, 8px 2px;
}

.copy-editor-contextbar .copy-editor-color-row {
  flex-wrap: nowrap;
}

.copy-editor-contextbar .copy-editor-color-picker {
  flex: 1 1 auto;
}

.copy-editor-advanced {
  border-top: 1px solid var(--border);
}

.copy-editor-advanced > summary {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
  color: var(--foreground);
  font: 700 12px/1.4 var(--sans);
  cursor: pointer;
  list-style: none;
}

.copy-editor-advanced > summary::-webkit-details-marker,
.copy-editor-advanced > summary::marker {
  display: none;
  content: "";
}

.copy-editor-advanced > summary::after {
  color: var(--muted-foreground);
  content: "＋";
  font-size: 16px;
  line-height: 1;
}

.copy-editor-advanced > summary:hover,
.copy-editor-advanced[open] > summary {
  color: var(--foreground);
  background: color-mix(in oklch, var(--primary) 5%, var(--background));
}

.copy-editor-advanced[open] > summary::after {
  color: var(--primary);
  content: "－";
}

.copy-editor-advanced > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.copy-editor-advanced .copy-editor-title-outline {
  padding-top: 12px;
  border-top: 0;
}

.copy-editor-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.copy-editor-style-field {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
}

.copy-editor-style-field .compact-segments {
  width: 100%;
}

.title-alignment-controls button {
  flex: 1;
  min-height: 36px;
  padding-inline: 6px;
}

.copy-editor-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.copy-editor-color-row input[type="color"],
.title-outline-color-picker input[type="color"] {
  width: 42px;
  height: 36px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  cursor: pointer;
}

.copy-editor-color-row input[type="color"]:focus-visible,
.title-outline-color-picker input[type="color"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.copy-editor-color-reset {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  background: var(--background);
  font: 650 12px/1.3 var(--sans);
}

.copy-editor-color-reset:not(:disabled):hover {
  border-color: var(--primary);
  color: var(--foreground);
}

.field-optional {
  color: var(--muted-foreground);
  font-size: .85em;
  font-style: normal;
  font-weight: 500;
}

.title-outline-controls {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr);
}

.title-outline-color-picker {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .copy-editor-style-grid {
    grid-template-columns: 1fr;
  }

  .title-outline-controls {
    grid-template-columns: 1fr auto;
  }

  .title-outline-range {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .copy-editor-color-reset { transition: none; }
}

/* Inspector control contract -------------------------------------------
   Keep the authoring rail calm at both desktop and phone widths. The card
   itself owns the visual language; this contract only regularises inspector
   hit areas, fields, color controls, ranges, and scroll affordances. */
.inspector {
  --inspector-control-height: 40px;
  --inspector-control-radius: var(--radius-sm);
  --inspector-pill-radius: var(--radius-sm);
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.inspector .catalog-results {
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-width: thin;
}

/* Touch screens should have one predictable document scroll. The catalog is
   part of the inspector flow, so do not nest a second scroll surface inside
   the mobile page; keep the capped result rail for wider layouts. */
@media (max-width: 920px) {
  .inspector .catalog-results {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
  }
}

/* Direction controls are still compact, but each arrow owns a real touch
   target and follows the same rounded control language as the inspector. */
.inspector .direction-pad {
  grid-template-columns: repeat(3, 24px);
  grid-template-rows: repeat(3, 24px);
  gap: 3px;
}

.inspector .direction-pad button {
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: var(--radius-sm);
}

.inspector .direction-center {
  margin: 7px;
  border-radius: 50%;
}

.inspector::-webkit-scrollbar,
.inspector .catalog-results::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.inspector::-webkit-scrollbar-track,
.inspector .catalog-results::-webkit-scrollbar-track {
  background: transparent;
}

.inspector::-webkit-scrollbar-thumb,
.inspector .catalog-results::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

.inspector::-webkit-scrollbar-thumb:hover,
.inspector .catalog-results::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

.inspector .copy-editor-section {
  gap: 18px;
}

.inspector .copy-editor-fields {
  gap: 14px;
}

.inspector .copy-editor-field {
  gap: 7px;
}

.inspector .copy-editor-field textarea,
.inspector .title-font-control select {
  min-height: var(--inspector-control-height);
  border-color: var(--muted-foreground);
  border-radius: var(--inspector-control-radius);
}

.inspector .copy-editor-field textarea {
  min-height: 68px;
  padding: 11px 12px;
  line-height: 1.55;
}

.inspector .copy-editor-style-grid {
  grid-template-columns: 1fr;
  gap: 10px;
  padding-top: 0;
  border-top: 0;
}

.inspector .copy-editor-style-field {
  gap: 9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.inspector .copy-editor-typography-head {
  gap: 8px;
}

.inspector .copy-editor-typography-head > span {
  font-size: 12px;
  line-height: 1.35;
}

.inspector .copy-editor-color-row {
  flex-wrap: wrap;
  gap: 8px;
}

.inspector-color-picker {
  display: inline-flex;
  min-width: 0;
  min-height: var(--inspector-control-height);
  flex: 1 1 116px;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 6px;
  border: 1px solid var(--border);
  border-radius: var(--inspector-pill-radius);
  color: var(--muted-foreground);
  background: var(--background);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.inspector-color-picker:hover {
  border-color: var(--line-strong);
  color: var(--foreground);
  background: color-mix(in srgb, var(--background) 70%, var(--muted));
}

.inspector-color-picker:focus-within {
  border-color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 14%, transparent);
}

.inspector-color-picker input[type="color"] {
  width: 28px;
  height: 28px;
  min-width: 28px;
  flex: 0 0 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  appearance: none;
  overflow: hidden;
  cursor: pointer;
}

.inspector-color-picker input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.inspector-color-picker input[type="color"]::-webkit-color-swatch,
.inspector-color-picker input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 50%;
}

.inspector .copy-editor-color-reset {
  min-height: var(--inspector-control-height);
  flex: 0 0 auto;
  padding-inline: 14px;
  border-radius: var(--inspector-pill-radius);
}

.inspector .copy-editor-typography,
.inspector .copy-editor-title-outline {
  gap: 10px;
}

.inspector .copy-editor-contextbar .copy-editor-typography {
  grid-template-columns: 1fr;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.inspector .copy-editor-contextbar .copy-editor-title-outline {
  padding-top: 12px;
  border-top: 0;
}

.inspector .title-font-control {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.inspector .title-font-control select {
  padding-inline: 12px 34px;
}

.inspector .title-weight-row {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
}

.inspector .title-weight-options {
  gap: 8px;
}

.inspector .title-weight-option {
  min-height: 52px;
  border-radius: var(--inspector-control-radius);
}

.inspector .title-outline-controls {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
}

.inspector .title-outline-swatches {
  gap: 8px;
}

.inspector :is(.color-swatch, .title-outline-swatch) {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
}

.inspector .color-swatch.is-selected::after {
  border-radius: 50%;
}

.inspector .title-outline-color-picker {
  width: 100%;
  justify-content: flex-start;
}

.inspector .title-outline-range {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 650;
}

.inspector input[type="range"],
.inspector .title-outline-range input[type="range"] {
  width: 100%;
  height: var(--inspector-control-height);
  min-height: var(--inspector-control-height);
}

.inspector .range-line {
  gap: 4px;
  margin-top: 10px;
}

.inspector .range-labels {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  line-height: 1.3;
}

.inspector .image-position-slider {
  grid-template-columns: 38px minmax(0, 1fr) 52px;
  gap: 8px;
  min-height: var(--inspector-control-height);
}

.inspector :is(.image-center-button, .image-placement-launch, .cutout-action) {
  min-height: var(--inspector-control-height);
  border-radius: var(--inspector-pill-radius);
}

@media (max-width: 420px) {
  .copy-editor-contextbar {
    padding: 11px;
  }

  .copy-editor-contextbar-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .copy-editor-card-focus {
    width: 100%;
  }

  .copy-editor-contextbar .copy-editor-style-grid,
  .inspector .copy-editor-style-grid,
  .copy-editor-contextbar .copy-editor-typography,
  .inspector .copy-editor-contextbar .copy-editor-typography {
    grid-template-columns: 1fr;
  }

  .inspector .copy-editor-style-grid {
    gap: 12px;
  }

  .inspector .copy-editor-style-field {
    padding: 0;
  }

  .inspector .title-outline-controls {
    gap: 10px;
  }

  .inspector .title-outline-color-picker {
    flex-basis: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inspector-color-picker { transition: none; }
}

/* Floating copy dock -----------------------------------------------------
   Text formatting has one visible home: the compact Canva-like toolbar over
   the card. The inspector keeps only the copy fields and card-target action. */
.text-editor-dock {
  position: relative;
  z-index: 24;
  display: flex;
  width: fit-content;
  max-width: calc(100% - 24px);
  min-height: 48px;
  align-items: center;
  gap: 5px;
  margin: 0 auto 12px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  background: color-mix(in srgb, var(--card) 96%, var(--muted));
  box-shadow: 0 3px 10px color-mix(in oklch, var(--primary) 6%, transparent);
  scrollbar-width: none;
}

.text-editor-dock::-webkit-scrollbar {
  display: none;
}

.text-editor-dock[hidden] {
  display: none;
}

.text-editor-dock-target,
.text-editor-dock-tools,
.text-editor-dock-align {
  display: flex;
  align-items: center;
}

.text-editor-dock-target {
  flex: 0 0 auto;
  min-width: 0;
  gap: 7px;
  padding: 0 6px 0 3px;
}

.text-editor-dock-target-mark {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--primary-foreground);
  background: var(--primary);
  font: 750 14px/1 var(--sans);
}

.text-editor-dock-target-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.text-editor-dock-target-copy strong {
  max-width: 84px;
  overflow: hidden;
  color: var(--foreground);
  font: 650 12px/1.25 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-editor-dock-eyebrow {
  color: var(--muted-foreground);
  font: 550 10px/1.2 var(--sans);
  white-space: nowrap;
}

.text-editor-dock-tools {
  min-width: max-content;
  gap: 2px;
}

.text-editor-dock-font-field {
  position: relative;
  display: flex;
  min-width: 128px;
}

.text-editor-dock-font-field select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.text-editor-dock-font-trigger {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--foreground);
  border-radius: var(--radius-sm);
  color: var(--foreground);
  background-color: var(--background);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.text-editor-dock-font-trigger:hover,
.text-editor-dock-font-trigger[aria-expanded="true"] {
  border-color: var(--line-strong);
  background-color: var(--muted);
}

.text-editor-dock-font-trigger:focus-visible,
.text-editor-dock-format:focus-visible,
.text-editor-dock-color-auto:focus-visible,
.text-editor-dock-icon-button:focus-visible,
.text-editor-dock-color input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.text-editor-dock-font-trigger-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-editor-dock-font-trigger-chevron {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 140ms ease;
}

.text-editor-dock-font-trigger[aria-expanded="true"] .text-editor-dock-font-trigger-chevron {
  transform: translateY(2px) rotate(225deg);
}

.text-editor-dock-font-menu {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  display: grid;
  width: min(252px, calc(100vw - 32px));
  max-height: min(320px, calc(100vh - 180px));
  gap: 2px;
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  background: color-mix(in srgb, var(--card) 98%, var(--muted));
  box-shadow: 0 14px 32px rgb(38 50 56 / .16), 0 1px 0 rgb(255 255 255 / .72) inset;
}

.text-editor-dock-font-menu[hidden] {
  display: none;
}

.text-editor-dock-font-option {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--foreground);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.text-editor-dock-font-option:hover,
.text-editor-dock-font-option:focus-visible {
  border-color: var(--border);
  background: var(--muted);
  outline: none;
}

.text-editor-dock-font-option.is-selected {
  border-color: var(--primary);
  color: var(--primary-foreground);
  background: var(--primary);
}

.text-editor-dock-font-option.is-selected:focus-visible,
.text-editor-dock-font-option.is-selected:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 88%, var(--foreground));
}

.text-editor-dock-font-menu::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.text-editor-dock-font-menu::-webkit-scrollbar-track {
  background: transparent;
}

.text-editor-dock-font-menu::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

.text-editor-dock-font-menu::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

.text-editor-dock-format,
.text-editor-dock-color-auto,
.text-editor-dock-icon-button {
  display: grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--foreground);
  background: transparent;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.text-editor-dock-format:hover,
.text-editor-dock-color-auto:hover,
.text-editor-dock-icon-button:hover,
.text-editor-dock-format.is-selected,
.text-editor-dock-color-auto[aria-pressed="true"],
.text-editor-dock-icon-button.is-selected {
  border-color: var(--border);
  background: var(--muted);
}

.text-editor-dock-format:disabled,
.text-editor-dock-color-auto:disabled {
  cursor: not-allowed;
  opacity: .4;
}

.text-editor-dock-format > span {
  font: 800 15px/1 var(--sans);
}

.text-editor-dock-format#textEditorItalicButton > span {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

.text-editor-dock-format#textEditorUnderlineButton > span {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.text-editor-dock-uppercase > span {
  font-size: 12px;
  letter-spacing: -.08em;
}

.text-editor-dock-color {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.text-editor-dock-color:hover {
  border-color: var(--border);
  background: var(--muted);
}

.text-editor-dock-color-mark {
  position: relative;
  color: var(--foreground);
  font: 800 15px/1 var(--sans);
  pointer-events: none;
}

.text-editor-dock-color-mark::after {
  position: absolute;
  right: -2px;
  bottom: -4px;
  left: -2px;
  height: 3px;
  border-radius: 999px;
  background: var(--dock-color, var(--foreground));
  content: "";
}

.text-editor-dock-color input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.text-editor-dock-outline-button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.text-editor-dock-outline-glyph {
  color: var(--foreground);
  font: 850 16px/1 var(--sans);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--foreground);
}

.text-editor-dock-popover {
  position: absolute;
  z-index: 30;
  top: 60px;
  left: 50%;
  display: grid;
  width: min(300px, calc(100% - 16px));
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  background: color-mix(in srgb, var(--card) 98%, var(--muted));
  box-shadow: 0 14px 32px rgb(38 50 56 / .16), 0 1px 0 rgb(255 255 255 / .72) inset;
  transform: translateX(-50%);
}

.text-editor-dock-popover[hidden] {
  display: none;
}

.text-editor-dock-popover-head,
.text-editor-dock-popover-row,
.text-editor-dock-outline-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.text-editor-dock-popover-head > div {
  display: grid;
  gap: 3px;
}

.text-editor-dock-popover-head strong {
  font-size: 13px;
  font-weight: 750;
}

.text-editor-dock-popover-head output,
.text-editor-dock-outline-color-value,
.text-editor-dock-popover-range output {
  color: var(--muted-foreground);
  font: 700 10px/1 var(--mono);
  white-space: nowrap;
}

.text-editor-dock-popover-hint {
  margin: -5px 0 0;
  color: var(--muted-foreground);
  font-size: 11px;
}

.text-editor-dock-popover-row > span,
.text-editor-dock-popover-range > span {
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 700;
}

.text-editor-dock-outline-color {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  cursor: pointer;
}

.text-editor-dock-outline-color:hover {
  border-color: var(--line-strong);
  background: var(--muted);
}

.text-editor-dock-outline-color-mark {
  color: var(--background);
  font: 850 16px/1 var(--sans);
  -webkit-text-stroke: 1px var(--dock-outline-color, var(--foreground));
  pointer-events: none;
}

.text-editor-dock-outline-color input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.text-editor-dock-outline-color:focus-within,
.text-editor-dock-popover-range input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.text-editor-dock-popover-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.text-editor-dock-popover-range input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 40px;
  min-height: 40px;
  accent-color: var(--primary);
}

.text-editor-dock-align {
  gap: 2px;
  padding: 0 1px;
}

.text-editor-dock-icon-button .alignment-glyph {
  width: 17px;
  height: 15px;
}

.text-editor-dock-divider {
  width: 1px;
  height: 24px;
  flex: 0 0 1px;
  margin: 0 3px;
  background: var(--border);
}

/* The right panel is intentionally a content editor now. Keep the legacy
   source controls mounted for saved-draft compatibility, but remove them
   from the visible and accessible interface so formatting has one entry point. */
.copy-editor-contextbar .copy-editor-toolbar,
.copy-editor-contextbar .copy-editor-advanced {
  display: none !important;
}

.copy-editor-contextbar {
  gap: 8px;
}

@media (max-width: 760px) {
  .text-editor-dock-popover {
    top: 56px;
  }
}

@media (max-width: 760px) {
  .text-editor-dock {
    width: calc(100% - 16px);
    max-width: none;
    justify-content: flex-start;
    border-radius: var(--radius);
  }
}

@media (max-width: 560px) {
  .text-editor-dock {
    width: calc(100% - 8px);
    margin-bottom: 8px;
  }

  .text-editor-dock-target-copy {
    display: none;
  }

  .text-editor-dock-target {
    padding-right: 1px;
  }

  .text-editor-dock-font-field {
    min-width: 116px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-editor-dock-format,
  .text-editor-dock-color-auto,
  .text-editor-dock-icon-button {
    transition: none;
  }
}