/* Pro-only styles (split-pixi-pro-repo). Additive on top of the pinned
   pixi submodule's style.css (loaded first in index.html) - never edits
   that file directly, per design.md's "no engine forking" decision. Each
   block below is the exact CSS pixi removed for the matching feature; see
   that feature's js/pro/*.js for the JS half. */

/* Symmetry toggle (#symmetry-toggle): a 4-state cycling control (off /
   horizontal / vertical / both), styled with the same .active accent
   treatment as every other topbar toggle plus a small letter badge (H/V/4)
   so the three "on" states stay visually distinguishable from each other,
   not just from off - see openspec/changes/5-add-symmetry-drawing-mode
   (pixi repo, pre-split history). */
#symmetry-toggle {
  position: relative;
}

#symmetry-toggle::after {
  content: '';
  position: absolute;
  bottom: 0.15rem;
  right: 0.15rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-size: 0.55rem;
  font-weight: 600;
  line-height: 0.8rem;
  text-align: center;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

#symmetry-toggle[data-symmetry-mode='horizontal']::after {
  content: 'H';
  opacity: 1;
}

#symmetry-toggle[data-symmetry-mode='vertical']::after {
  content: 'V';
  opacity: 1;
}

#symmetry-toggle[data-symmetry-mode='both']::after {
  content: '4';
  opacity: 1;
}

/* Canvas Settings' Name field - its only user, moved here alongside the
   panel (the rest of .canvas-settings-* styling stays in the pixi
   submodule's style.css, shared with the Standard Export popover). */
.canvas-settings-name-label {
  flex: 1;
}

.canvas-settings-name-label input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: inherit;
  border-radius: 0.4rem;
  font-size: 0.9rem;
}

/* Rectangle Filled toggle's icon - raw SVG, not a font glyph (see
   index.html for why). currentColor so it follows the button's text
   color exactly like the font icons do (including the active/blue
   state via .tool-button.active). */
.rectangle-fill-icon {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor;
}

/* Color Library panel + its import/ramp preview popovers - moved here
   from pixi's pre-split style.css, unchanged (split-pixi-pro-repo). */
/* Top-most section (see .right-sidebar's order comment in index.html) -
   bounded to a fixed height range regardless of window height, rather
   than growing to fill remaining space (Layers does that now instead -
   see .layers-panel). */
.color-library-panel {
  flex: none;
  max-height: clamp(200px, 30vh, 250px);
  overflow-y: auto;
  border-bottom: 1px solid var(--color-surface);
  display: flex;
  flex-direction: column;
}

.color-library-header {
  /* Row layout (display/flex-direction/gap) comes from the shared
     .panel-header (panel-header-design) - this rule only owns what's
     specific to the Color Library header. */
  padding: 0.4rem 0.5rem;
  flex: none;
}

.color-library-header h2 {
  flex: 1;
  /* min-width: 0 lets this shrink below its text's natural width instead
     of forcing the header row (and its 5 icon buttons) wider than the
     sidebar at the clamp's narrower end (icon-button-size-system) - a
     flex item's default min-width is auto (its content size), which
     would otherwise win over flex:1's shrink. Truncates with an ellipsis
     rather than wrapping/clipping raw, so the label stays legible. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  margin: 0;
}

.color-library-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

/* Collapsed: only the header's name/chevron row stays visible (mirrors
   .layers-panel.collapsed). */
.color-library-panel.collapsed .color-library-body {
  display: none;
}

.color-library-panel.collapsed .panel-header-actions {
  display: none;
}

/* Row layout (display/gap/flex-wrap), sizing, chrome (XS, no border/
   background), and glyph size all come from the shared
   .panel-header-actions / .panel-header-actions .tool-button.icon-
   button rules above - these 5 buttons don't need their own override. */

.color-library-select {
  margin: 0 0.5rem 0.4rem;
  padding: 0.3rem 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: inherit;
  border-radius: 0.4rem;
  font-size: 0.8rem;
  flex: none;
}

/* Name input + Save/Cancel on one line - at the sidebar's narrowest
   clamped width (see .right-sidebar) the two buttons alone eat most of
   the row, leaving the flex:1 input too little space for its own
   placeholder text. flex-wrap lets the input drop to its own line above
   the buttons instead of clipping, same technique as
   .brush-editor-row:last-child's button-wrap comment above. */
.new-palette-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0.5rem 0.4rem;
  flex: none;
}

.new-palette-row input {
  flex: 1;
  min-width: 6rem;
  padding: 0.3rem 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: inherit;
  border-radius: 0.4rem;
  font-size: 0.8rem;
}

.new-palette-row .tool-button {
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
}

/* Import-palette popover (2o-image-import-refinements) - built on
   .canvas-settings-panel's base popover styling (position/size/
   background/border), same as .export-panel; position:fixed + JS
   (js/workspace.js's positionImportPreview), clamped to the viewport.
   Its DOM location no longer matters for layout since it's taken out of
   flow, same reasoning as .canvas-settings-panel's own comment. Rows
   inside reuse .canvas-settings-row's generic label/input[type=number]
   styling - only the swatch grid and the text input need their own
   rules here. */
.import-preview-panel {
  width: 16rem;
}

.import-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19px, 1fr));
  grid-auto-rows: 19px;
  align-content: start;
  gap: 0.25rem;
  /* Fixed, not max - a shorter preview (fewer rows) must reserve the
     same space as a full one, or the controls below still shift as the
     count changes (the bug this popover conversion was supposed to
     fix). Scrolls internally past that height instead of growing. */
  height: 9rem;
  overflow-y: auto;
}

.import-preview-panel input[type='text'] {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: inherit;
  border-radius: 0.4rem;
  font-size: 0.9rem;
}

/* Smaller swatches (~19px, was ~26px) so more rows fit within the
   panel's now-bounded height (see .color-library-panel). */
.color-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19px, 1fr));
  gap: 0.25rem;
  padding: 0 0.5rem 0.5rem;
  overflow-y: auto;
}

.color-library-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.25rem;
  border: 2px solid var(--color-border);
  padding: 0;
  cursor: pointer;
}

.color-library-swatch.active {
  border-color: var(--color-accent);
}

/* Hover feedback (button-hover-states) - same reasoning as
   .palette-swatch:hover. */
.color-library-swatch:not(.active):hover {
  border-color: var(--color-text-secondary);
}

.color-library-empty {
  grid-column: 1 / -1;
  padding: 0 0.5rem 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Hover-buzz on iOS (mirrors pixi's own .ios-platform buzz rule - see
   its own comment - which dropped .color-library-swatch when this panel
   moved here; @keyframes hover-buzz itself stays defined there, loaded
   first). */
@media (prefers-reduced-motion: no-preference) {
  .ios-platform .color-library-swatch:not(.no-buzz):hover {
    animation: hover-buzz 0.25s linear infinite;
  }
}

/* Layers panel (add/delete/reorder/rename/visibility/blend-mode/
   opacity/background/reference-image/merge, plus its shared
   .panel-header* base classes also used by Color Library) - moved here
   from pixi's pre-split style.css, unchanged (split-pixi-pro-repo). */

/* Bottom-most section (see .right-sidebar's order comment in index.html)
   - fills whatever's left after Color Library's bounded height and
   Brushes' own cap, mirroring Color Library's old flex:1 role. */
.layers-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--color-surface);
  display: flex;
  flex-direction: column;
}

/* Collapsed: only the header's name/chevron row stays visible (see
   .panel-header/.layers-panel-body below) - the panel itself shrinks to
   that row's content height instead of continuing to claim flex space.
   The action-icons row collapses away too (panel-header-design), same
   as .color-library-panel.collapsed below - a collapsed accordion
   header shows just the title, not its toolbar. */
.layers-panel.collapsed {
  flex: none;
}

.layers-panel.collapsed .panel-header-actions {
  display: none;
}

.layers-panel-header {
  /* Row layout (display/flex-direction/gap) comes from the shared
     .panel-header (panel-header-design) - this rule only owns what's
     specific to the Layers panel's header. */
  padding: 0.4rem 0.5rem;
  flex: none;
}

.layers-panel-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.layers-panel.collapsed .layers-panel-body {
  display: none;
}

.layers-panel-header h2 {
  flex: 1;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  margin: 0;
}

/* XS (icon-button-size-system) and no button chrome - shared by every
   boxed action icon in a panel-header-actions row (the reference-image
   button here, the 5 Color Library buttons below). .tool-button in the
   selector deliberately excludes #add-layer-button, which isn't boxed
   to begin with (it has its own bare/S-size rule above) and shouldn't
   pick up this XS override. background/border reset matches
   .layer-visibility-toggle/.layer-delete-button's identical "glyph, not
   a button" pattern - .icon-button alone doesn't reset .tool-button's
   border/background, only removing .tool-button itself does. */
.panel-header-actions .tool-button.icon-button {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  background: transparent;
  border: none;
}

/* This rule's own background: transparent above and the shared
   .icon-button:not(:disabled):hover rule (button-hover-states) are
   equal specificity (0,3,0 each) - as the later rule in the file, this
   one would otherwise win even on hover and silently cancel the hover
   background. Repeating it here, scoped to :hover, restores it. */
.panel-header-actions .tool-button.icon-button:not(:disabled):hover {
  background: var(--color-surface-alt);
}

/* 1.1rem, matching .layer-visibility-toggle/.layer-delete-button's own
   glyph-in-XS-box ratio elsewhere in this sidebar (icon-button-size-
   system) - was 1rem on Color Library's buttons only, leaving a visibly
   bigger gap around the glyph than that established ratio (~25% more),
   and unset on the Layers panel's reference-image button, which fell
   back to .material-symbols-outlined's default 1.4rem and nearly filled
   its XS box edge-to-edge. One shared rule fixes both. */
.panel-header-actions .tool-button.icon-button .material-symbols-outlined {
  font-size: 1.1rem;
}

/* Add-layer button: S size, no surrounding button chrome - deliberately
   bare .icon-button (no .tool-button) so it reads as a plain glyph next
   to the reference-image button's boxed icon rather than a second
   button. background/border/color reset matches .layer-visibility-
   toggle/.layer-delete-button's identical "glyph, not a button" pattern
   below - .icon-button alone doesn't reset the browser's default button
   chrome, only .tool-button does. */
#add-layer-button.icon-button {
  width: var(--icon-size-s);
  height: var(--icon-size-s);
  background: transparent;
  border: none;
  color: inherit;
}

/* The ID selector above outranks the shared .icon-button:hover rule
   (button-hover-states) regardless of source order, so its background:
   transparent wins even while hovering unless repeated here at the
   same ID specificity. */
#add-layer-button.icon-button:not(:disabled):hover {
  background: var(--color-surface-alt);
}

/* Dropping .tool-button above also drops .tool-button:disabled's dimming
   (workspace.js disables this button at the 8-layer cap) - replaced
   here so hitting the cap still reads as disabled, not just inert. */
#add-layer-button.icon-button:disabled {
  opacity: 0.4;
}

/* Real image asset (assets/icons/layers_add.svg), not a font glyph or
   hand-copied inline markup - see index.html's comment on #add-layer-
   button. Rendered via CSS mask rather than <img> so it still recolors
   with currentColor like every other icon button here (light/dark
   theme, hover, disabled dimming) - an <img>'s pixels are opaque to
   CSS, fixed at whatever colors the source file happens to use.
   mask-mode: alpha (not the mask default, luminance) matters here
   specifically: the source file draws its glyph in near-black with a
   white accent for its own two-tone display, and under luminance
   masking dark pixels read as "mostly transparent" - exactly backwards
   from what a mask needs. Alpha mode goes off which pixels have ink at
   all, regardless of what color that ink is, which is what actually
   reproduces the glyph's shape. Sized like .rectangle-fill-icon
   (smaller than the S 1.6rem button box - a filled shape with no font
   side-bearing needs more headroom than a font glyph at the same
   nominal size would). */
.layers-add-icon {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  background-color: currentColor;
  mask-image: url('assets/icons/layers_add.svg');
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url('assets/icons/layers_add.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* Shared by .layers-panel-header and .color-library-header - the whole
   block is a click target that collapses/expands the panel down to just
   this header (Photoshop-accordion style), not only the chevron icon.
   Interactive controls inside it (the header-actions icon buttons) stop
   propagation in JS so clicking them doesn't also toggle the collapse.
   Two stacked rows (panel-header-design) - the name/chevron row on top,
   the action icons on their own row below - instead of everything
   crammed into one row, which is what previously forced the action
   icons down to an XS/cramped size to keep from overflowing the
   sidebar (see .color-library-header-actions .icon-button's comment). */
.panel-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  cursor: pointer;
}

/* Row 1: panel name left, collapse chevron pinned to the right edge (the
   name's flex: 1 - set on .layers-panel-header h2/.color-library-header
   h2 - absorbs the row's slack so the chevron doesn't have to). */
.panel-header-top {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Row 2: the header's action icon buttons, wrapping onto more lines
   instead of overflowing if the sidebar is narrower than the full set. */
.panel-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.panel-collapse-chevron {
  flex: none;
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  transition: transform 0.15s ease;
  /* AUD-5: unlike this file's other icon-only elements, this one had no
     fixed footprint at all - just font-size - so icon-font-failure
     fallback text ("expand_more") would grow the box and push the rest
     of the panel-header row. Pin it to a square matching the font-size
     and clip anything wider. */
  width: 1.1rem;
  height: 1.1rem;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Collapsed state rotates the chevron from pointing down (expanded) to
   pointing right, the common accordion convention. */
.panel-header[aria-expanded="false"] .panel-collapse-chevron {
  transform: rotate(-90deg);
}

/* Photoshop-style toolbar: Blend mode + Opacity, editing whichever
   layer is active - not per-row (see syncLayersPanelToolbar in
   js/workspace.js). One row (see index.html's toolbar comment for why
   the prior two-row layout no longer applies): the Blend select is
   sized to its own text instead of the full row width, freeing room for
   the Opacity button on the same line. */
.layers-panel-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  border-top: 1px solid var(--color-surface);
  border-bottom: 1px solid var(--color-surface);
  background: var(--color-surface-alt);
}

/* Takes the row's remaining width (Opacity next to it is sized to its
   own compact content instead - see .layers-panel-opacity-toggle).
   appearance: none + a custom background-image chevron, not the native
   OS control - Safari otherwise renders <select> with its own puffy
   chrome that ignores the dark background/border set here. */
.layers-panel-blend-select {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a0a0a5' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 0.3rem center / 1rem;
  background-color: var(--color-surface);
  color: inherit;
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
  font-size: 0.75rem;
  padding: 0.25rem 1.4rem 0.25rem 0.4rem;
}

/* Same control, light theme: the chevron above is baked into a data-URI
   (can't be parameterized with a CSS var inside the URL string), so the
   whole background shorthand is restated here with a darker chevron fill
   for contrast against the light surface. */
:root[data-theme="light"] .layers-panel-blend-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236c6c70' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* Opens #layers-panel-opacity-popover on click - see openLayersOpacityPopover
   in js/workspace.js. Icon, not the word "Opacity" - reclaims space at
   the sidebar's narrowest clamped width (see .right-sidebar); a tooltip
   (data-tooltip) still names it, same icon-only convention the Pencil
   Size/Opacity sliders use. Sized to its own content (flex: none), not
   flex-grown to fill the row - Blend mode above takes the rest instead.
   appearance: none - Safari otherwise renders <button> with its own
   native chrome (visibly lighter background, rounder corners) that
   overrides the dark background/border set here. */
.layers-panel-opacity-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
  color: inherit;
  font: inherit;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
}

/* Hover feedback (button-hover-states). */
.layers-panel-opacity-toggle:hover {
  background: var(--color-surface-alt);
}

.layers-panel-opacity-icon {
  flex: none;
  font-size: 1rem;
  color: var(--color-text-secondary);
}

.layers-panel-opacity-readout {
  flex: none;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Popover holding the actual slider + a number field for direct entry -
   position via fixed + JS, clamped to the viewport, same pattern as
   #color-picker-popover (see openColorPicker/openLayersOpacityPopover in
   js/workspace.js). Lives outside .right-sidebar (index.html) so that
   panel's own overflow-y:auto can't clip it. */
.opacity-popover {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.4rem;
  padding: 0.5rem 0.6rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 50;
}

.layers-panel-opacity-slider {
  width: 8rem;
}

.layers-panel-opacity-number {
  width: 3rem;
  background: var(--color-bg);
  color: inherit;
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
  padding: 0.2rem 0.3rem;
  font-size: 0.8rem;
}

.layers-panel-list {
  display: flex;
  flex-direction: column;
}

/* One compact row per layer - thumbnail, visibility, name, small
   reorder/delete icons. Blend mode/Opacity moved to the shared toolbar
   above (see .layers-panel-toolbar), matching Photoshop's own panel,
   where those controls apply to the selected layer rather than living
   inline in every row. */
.layer-row {
  display: flex;
  align-items: center;
  /* flex-wrap (icon-button-size-system) - a normal layer row (visibility,
     thumbnail, name, reorder x2, delete) fits on one line even at the
     sidebar's narrowest clamped width, but the reference image layer row
     adds a lock icon and a smoothing toggle on top of that (see
     buildLayerRow in js/workspace.js) and no realistic spacing budget fits
     all 8 controls on one line at the sidebar's normal clamped width
     without shrinking icons below this scale's XS floor (see :root's
     --icon-size-xs comment). Wrapping - not overflow-x:auto's implicit
     scrollbar (the overflow-pairing rule, same bug this container already
     had) - keeps every control visible and reachable; only rows with more
     controls than fit end up two lines tall. */
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem;
  border-top: 1px solid var(--color-surface);
  cursor: pointer;
}

/* Photoshop's own selected-row highlight - a solid accent bar, not just
   a subtly darker background. */
.layer-row.active {
  background: var(--color-accent-strong);
}

.layer-row.active .layer-name-input,
.layer-row.active .layer-reorder-button,
.layer-row.active .layer-delete-button,
.layer-row.active .layer-visibility-toggle,
.layer-row.active .layer-lock-icon {
  color: #fff;
}

/* merge-layers: marked (multi-selected) layers, distinct from the single
   active-layer highlight above - a soft fill plus an inset accent border,
   so a row can show both active (solid fill) and marked (border) at once
   without one obscuring the other. */
.layer-row.marked {
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

/* A row that's both active and marked: keep the active row's solid fill
   (and white text, from the .active rules above) rather than letting
   .marked's lighter background win on equal specificity - only the
   marked border needs to show through. Must repeat `background` here
   (not just `box-shadow`), or cascade order alone decides which
   background wins and the white active text ends up on the light
   marked background instead. */
.layer-row.active.marked {
  background: var(--color-accent-strong);
  box-shadow: inset 0 0 0 2px #fff;
}

.layer-visibility-toggle {
  flex: none;
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1rem;
  padding: 0;
  cursor: pointer;
  /* AUD-5: contain the icon-font-failure fallback text (see .icon-button). */
  overflow: hidden;
}

.layer-visibility-toggle .material-symbols-outlined,
.layer-delete-button .material-symbols-outlined {
  font-size: 1.1rem;
}

/* Real per-layer pixel-content preview, Photoshop-style, not a generic
   placeholder (see buildLayerThumbnailCanvas). Flat light background
   behind it stands in for transparency, same convention the Gallery's
   own project thumbnails already use. */
.layer-thumbnail {
  flex: none;
  width: 2rem;
  height: 2rem;
  background: #e2e2e2;
  border: 1px solid var(--color-border);
  border-radius: 0.2rem;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
}

.layer-name-input {
  /* flex-basis (the "4rem") lowered from 4rem to 2rem, and min-width
     from 3rem to 2rem (icon-button-size-system). Two separate reasons:
     min-width - the reference image layer row adds a lock icon +
     smoothing toggle alongside the usual visibility/thumbnail/reorder/
     delete controls, and a 3rem floor left no room to shrink under that
     extra load at the sidebar's normal clamped width, forcing .layer-row
     wider than its container (the same overflow-pairing problem - see
     .color-library-header-actions .icon-button's comment). flex-basis -
     .layer-row's flex-wrap (added alongside this) decides whether a row
     needs a second line using each item's flex-basis, not its post-
     shrink size, so a 4rem basis was pushing ordinary (non-reference)
     rows onto two lines even though they fit on one once name-input
     actually shrinks. 2rem for both keeps ordinary rows on one line
     while still leaving enough width to read a few characters of a
     layer name while editing - it grows via flex-grow to fill any
     leftover space on its line either way. */
  flex: 1 1 2rem;
  min-width: 2rem;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  font-size: 0.85rem;
  padding: 0.15rem 0.3rem;
  border-radius: 0.3rem;
}

.layer-name-input:focus-visible {
  border-color: var(--color-accent);
  outline: none;
}

/* Background layer (2g-background-layer) - locked in stacking position,
   see buildLayerRow in js/workspace.js. `span.layer-lock-icon` (not just
   `.layer-lock-icon`) (icon-button-size-system) - this element also
   carries the bare `.material-symbols-outlined` class, and the Google
   Fonts icon stylesheet (index.html's link, loaded after this file) ships
   its own `.material-symbols-outlined { font-size: 24px }` default at the
   same specificity; being later in the cascade, it silently won over this
   rule's 0.9rem, rendering the lock icon at 24px instead of ~14px - found
   while fixing the reference image layer row's overflow, where the extra
   ~10px mattered. The added element-type qualifier raises this selector's
   specificity just enough to win instead. */
span.layer-lock-icon {
  flex: none;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* Reference image layer only (reference-image-original-resolution) -
   toggles Pixelated vs. Original resolution mode, see buildLayerRow in
   js/workspace.js. Sized identically to .layer-reference-smoothing-
   toggle, which it sits next to (visible only in Pixelated mode). */
.layer-reference-mode-toggle {
  flex: none;
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1rem;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}

.layer-reference-mode-toggle .material-symbols-outlined {
  font-size: 1.1rem;
}

.layer-reference-mode-toggle:disabled {
  opacity: 0.3;
}

/* Reference image layer only - toggles smoothed vs. blocky downscale on
   the last upload, see buildLayerRow in js/workspace.js. Sized like
   .layer-visibility-toggle, which it sits next to. */
.layer-reference-smoothing-toggle {
  flex: none;
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1rem;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}

.layer-reference-smoothing-toggle .material-symbols-outlined {
  font-size: 1.1rem;
}

.layer-reference-smoothing-toggle:disabled {
  opacity: 0.3;
}

.layer-row-actions {
  display: flex;
  align-items: center;
  /* Tightened from 0.3rem (icon-button-size-system) to reclaim a little
     more width for the reference image layer row's extra controls - see
     .layer-name-input's min-width comment above for the full picture. */
  gap: 0.2rem;
  flex: none;
}

.layer-reorder-button,
.layer-delete-button {
  flex: none;
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 0.9rem;
  padding: 0;
  cursor: pointer;
  /* AUD-5: contain the icon-font-failure fallback text (see .icon-button). */
  overflow: hidden;
}

.layer-reorder-button .material-symbols-outlined {
  font-size: 0.95rem;
}

.layer-reorder-button:disabled,
.layer-delete-button:disabled,
.layer-visibility-toggle:disabled {
  opacity: 0.3;
}

/* Hover feedback (button-hover-states) - the one icon-only class in this
   file that doesn't carry .icon-button (see that class's own hover rule,
   which already covers .layer-delete-button/.layer-visibility-toggle),
   so it needs its own copy of the same treatment. */
.layer-reorder-button:not(:disabled):hover {
  background: var(--color-surface-alt);
  border-radius: 0.3rem;
}

/* Hover-buzz on iOS for .layer-reorder-button (mirrors pixi's own
   .ios-platform buzz rule, which dropped it from its shared selector
   list when Layers moved here - .layer-visibility-toggle needs no
   equivalent, it already carries .icon-button, still covered by pixi's
   own rule). */
@media (prefers-reduced-motion: no-preference) {
  .ios-platform .layer-reorder-button:not(:disabled):not(.no-buzz):hover {
    animation: hover-buzz 0.25s linear infinite;
  }
}