/*
 * Growtopia Clothing Planner — Clean Phase 21 foundation
 * Structural consolidation only. Rule order is preserved exactly.
 */

/* ===== Original source: phase12-player-customization.css ===== */
/* ======================================================================
   Phase 12 carry-forward — Phase 10 UI foundation lock

   This file is deliberately isolated from css/app.css. It establishes
   protective layout invariants and shared popup-content alignment without
   replacing the Phase 10 drawer, tab, window, or responsive systems.
   ====================================================================== */

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"])[data-ui-foundation="phase10-locked"] {
  --phase12-foundation-popup-copy-align: left;
  --phase12-foundation-popup-icon-gap: 10px;
}

/* Preserve the Phase 10 geometry contract. New content must shrink inside
   existing columns instead of widening the drawer or action rail. */
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) :is(
  .inventory-dock,
  .inventory-window,
  .inventory-main,
  .inventory-toolbar,
  .inventory-content,
  .inventory-actions,
  .settings-panel,
  .makeup-settings-panel,
  .customization-grid,
  .customization-field,
  .modal-backdrop .gt-window
) {
  box-sizing: border-box;
  min-width: 0;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) :is(
  .inventory-window,
  .inventory-main,
  .inventory-toolbar,
  .inventory-content,
  .settings-panel,
  .makeup-settings-panel,
  .customization-grid,
  .modal-backdrop .gt-window
) {
  max-width: 100%;
}

/* Tabs remain image-only controls physically behind the inventory window.
   The selected sprite is the state; no extra blue button panel is drawn. */
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .inventory-tabs {
  z-index: 1;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .inventory-window {
  z-index: 2;
  isolation: isolate;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .inventory-tab,
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .inventory-tab:hover,
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .inventory-tab:focus-visible,
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .inventory-tab.is-active {
  border: 0;
  background: transparent !important;
  box-shadow: none;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .inventory-tab::before,
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .inventory-tab::after {
  content: none !important;
}

/* Shared popup copy language. Window titles keep their authored placement;
   labels, descriptions, option copy, and their icons always read left-to-right. */
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .modal-backdrop .gt-window :is(
  label,
  p,
  h3,
  legend,
  output,
  .wrench-selection-info,
  .wrench-option-section,
  .growtool-settings-section,
  .skin-custom-row,
  .skin-alpha-control
) {
  text-align: var(--phase12-foundation-popup-copy-align);
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) :is(
  .flag-picker-option,
  .growtool-popup-button,
  .growtool-check-row,
  .wrench-visibility-toggle,
  .skin-custom-row,
  .skin-alpha-control
) {
  direction: ltr;
  text-align: left;
}

/* Existing icon-and-label controls already use icon-first DOM order. These
   rules lock that order so later phases cannot place an empty slot or label
   before the icon. */
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) :is(
  .flag-picker-option,
  .growtool-popup-button,
  .growtool-check-row
) > :is(img, .gt-checkbox-visual, .flag-button-icon, .settings-title-icon) {
  order: -1;
  flex: 0 0 auto;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .flag-picker-option {
  grid-template-columns: 34px minmax(0, 1fr);
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .growtool-popup-button,
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .growtool-check-row {
  justify-content: flex-start;
}

/* Popup content may scroll inside its own authored area, but cannot force a
   shared window or the page wider than the viewport. */
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .modal-backdrop .gt-window :is(
  .flag-picker-list,
  .wrench-option-grid,
  .growtool-settings-body,
  .skin-swatches-scroll
) {
  min-width: 0;
  max-width: 100%;
}


/* ======================================================================
   Phase 12 — Player Customization portion

   Only Player Customization, the skin catalog, and input-panel paint are
   extended here. The Phase 10 drawer/window geometry remains protected by
   the carry-forward rules above.
   ====================================================================== */

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) {
  --phase12-input-panel: rgba(39, 125, 159, 0.5);
}

/* Move the complete skin selector into Player Customization without
   changing the existing two-column drawer contract. */
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-control {
  min-width: 0;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-control-row {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-control-row .skin-colors-button {
  width: auto;
  min-width: 132px;
  max-width: 100%;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-control-row output {
  min-width: 0;
  overflow: hidden;
  color: #d2d6d9;
  font-size: 11px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Every input-style panel is painted with a literal 50% alpha background.
   Borders, text, icons, carets, and shadows remain fully opaque because the
   element itself never receives opacity. */
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) :is(
  .search-control input,
  .filter-box,
  .customization-field input:not([type="color"]):not([type="range"]):not([type="checkbox"]),
  .customization-field select,
  .control-group input[type="text"],
  .control-group input[type="search"],
  .control-group input[type="number"],
  .rgb-control input,
  .gt-window input[type="text"],
  .gt-window input[type="search"],
  .gt-window input[type="number"],
  .gt-window input[type="email"],
  .gt-window input[type="url"],
  .gt-window input[type="tel"],
  .gt-window input[type="password"],
  .gt-window textarea,
  .gt-window select,
  .skin-custom-row input[type="text"],
  .flag-picker-button
) {
  background-color: var(--phase12-input-panel) !important;
  opacity: 1 !important;
}

/* The formatted GrowID preview sits below the real input. Put the 50% panel
   on the wrapper so both plain and formatted names use one panel only. */
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .formatted-growid-input {
  background-color: var(--phase12-input-panel) !important;
  border-radius: 4px;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .formatted-growid-input > input,
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .formatted-growid-input > input.has-formatted-preview {
  background-color: transparent !important;
}

/* Player Customization labels are left aligned and punctuated in the HTML.
   This rule prevents a later component from centering them. */
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .player-customization-panel :is(
  .customization-field > span,
  .phase12-skin-control > span,
  .control-group > label,
  .rgb-control > legend
) {
  text-align: left !important;
}

/* Organized skin catalog. It reuses the Phase 10 popup shell and only
   replaces the flat, unlabeled color strip inside the window. */
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-catalog.is-phase12-organized {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  gap: 18px;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-section {
  display: grid;
  min-width: 0;
  gap: 10px;
  padding-top: 14px;
  border-top: 2px solid rgba(255, 255, 255, 0.48);
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-section:first-child {
  padding-top: 0;
  border-top: 0;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-section-heading {
  display: grid;
  min-width: 0;
  gap: 3px;
  text-align: left;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-section-heading :is(h3, h4, p) {
  margin: 0;
  text-align: left !important;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-section-heading h3 {
  color: #fff36a;
  font-size: 18px;
  line-height: 1.15;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-section-heading h4 {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.15;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-section-heading p {
  color: #ffffff;
  font-size: 12px;
  line-height: 1.25;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-role-skin-groups {
  display: grid;
  min-width: 0;
  gap: 14px;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-role-skin-group {
  display: grid;
  min-width: 0;
  gap: 8px;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 124px));
  justify-content: start;
  min-width: 0;
  gap: 12px;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-list .skin-swatch {
  display: grid;
  grid-template-rows: 58px auto;
  align-content: start;
  width: 100%;
  min-width: 0;
  min-height: 86px;
  aspect-ratio: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-list .skin-swatch-panel {
  position: relative;
  z-index: 0;
  inset: auto;
  display: block;
  width: 100%;
  height: 58px;
  border: 3px solid var(--swatch-solid);
  border-radius: 4px;
  background: var(--swatch-panel);
  box-shadow: inset 2px 2px 0 #000000, 2px 2px 0 #000000;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-list .skin-swatch::after {
  content: none !important;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-list .skin-swatch-name {
  display: block;
  min-width: 0;
  padding: 6px 2px 0;
  overflow-wrap: anywhere;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  text-align: left;
  text-shadow: 1px 1px 0 #000000 !important;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-list .skin-swatch.is-selected {
  outline: 0;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-list .skin-swatch.is-selected .skin-swatch-panel {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-list .skin-swatch:focus-visible {
  outline: 0;
}

body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-list .skin-swatch:focus-visible .skin-swatch-panel {
  outline: 3px solid #fff36a;
  outline-offset: 3px;
}

/* Custom color and alpha controls remain their own final section. */
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .skin-custom-row,
body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .skin-alpha-control {
  text-align: left;
}

@media (max-width: 680px) {
  body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-control-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-control-row .skin-colors-button {
    width: 100%;
    min-width: 0;
  }

  body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-catalog.is-phase12-organized {
    width: 100%;
    gap: 16px;
  }

  body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-list {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 13px;
    padding: 5px 4px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-color: var(--gt-border) rgba(0, 0, 0, 0.22);
  }

  body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase12-skin-list .skin-swatch {
    width: 112px;
    min-width: 112px;
    flex: 0 0 112px;
  }

  body:is([data-planner-phase="12"], [data-planner-phase="13"], [data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .skin-swatches-scroll {
    overflow-x: hidden;
    overflow-y: visible;
    padding-inline: 0;
  }
}