/* =========================================================
   TXT-ERS — ECOLOGY OF BELONGING
   ========================================================= */

.belonging-ecology-interaction,
.belonging-ecology-layout,
.belonging-ecology-stage-panel,
.belonging-ecology-tray-panel,
.belonging-ecology-stage,
.belonging-ecology-tray {
  min-width: 0;
}

.belonging-ecology-interaction {
  width: 100%;
}

.belonging-ecology-introduction {
  max-width: 640px;
}

.belonging-ecology-layout {
  margin-top: 24px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.24fr)
    minmax(250px, 0.76fr);

  gap: 18px;

  align-items: start;
}

.belonging-ecology-stage-panel,
.belonging-ecology-tray-panel {
  padding: 18px;

  border:
    1px solid
    rgba(68, 78, 112, 0.13);

  border-radius: 24px;

  background:
    rgba(255, 255, 255, 0.78);

  box-shadow:
    0 13px 32px
    rgba(42, 38, 78, 0.07),

    inset 0 1px 0
    rgba(255, 255, 255, 0.94);
}

.belonging-ecology-stage-title,
.belonging-ecology-tray-title {
  margin: 0;

  color: #262b43;

  font-size: 0.82rem;
  font-weight: 820;
  line-height: 1.2;
}

.belonging-ecology-stage-help,
.belonging-ecology-tray-help {
  margin: 5px 0 0;

  color: #6a6e80;

  font-size: 0.69rem;
  line-height: 1.45;
}

.belonging-ecology-stage {
  position: relative;

  width: 100%;
  aspect-ratio: 1;

  margin-top: 16px;

  overflow: hidden;

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(226, 237, 233, 0.82) 0%,
      rgba(236, 237, 248, 0.55) 38%,
      rgba(248, 246, 239, 0.48) 72%,
      rgba(255, 255, 255, 0.30) 100%
    ),

    linear-gradient(
      145deg,
      #f9fbf9,
      #f5f3fa
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.92);
}

.belonging-ecology-rings,
.belonging-ecology-placed-layer {
  position: absolute;
  inset: 0;
}

.belonging-ecology-ring {
  position: absolute;

  border:
    1px solid
    rgba(75, 82, 129, 0.17);

  border-radius: 50%;

  pointer-events: auto;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.belonging-ecology-ring--wider {
  inset: 5%;

  background:
    rgba(214, 226, 237, 0.13);
}

.belonging-ecology-ring--community {
  inset: 18%;

  background:
    rgba(222, 216, 243, 0.13);
}

.belonging-ecology-ring--everyday {
  inset: 31%;

  background:
    rgba(220, 237, 227, 0.15);
}

.belonging-ecology-ring--closest {
  inset: 43%;

  background:
    rgba(244, 218, 190, 0.18);
}

.belonging-ecology-ring.is-drag-over {
  border-color:
    rgba(81, 63, 183, 0.72);

  background:
    rgba(225, 219, 255, 0.32);

  box-shadow:
    inset 0 0 0 3px
    rgba(95, 73, 207, 0.09);
}

.belonging-ecology-ring-label {
  position: absolute;

  top: 7px;
  left: 50%;

  padding: 4px 7px;

  transform:
    translateX(-50%);

  border-radius: 999px;

  color: #626679;

  background:
    rgba(255, 255, 255, 0.84);

  box-shadow:
    0 4px 12px
    rgba(42, 37, 79, 0.06);

  font-size: 0.56rem;
  font-weight: 730;
  line-height: 1;

  white-space: nowrap;
}

.belonging-ecology-center {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 7;

  width: 66px;
  height: 66px;

  display: grid;
  place-items: center;

  transform:
    translate(-50%, -50%);

  border:
    1px solid
    rgba(255, 255, 255, 0.90);

  border-radius: 50%;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #4c3faf,
      #7667d0
    );

  box-shadow:
    0 14px 32px
    rgba(72, 55, 168, 0.25),

    inset 0 1px 0
    rgba(255, 255, 255, 0.28);

  font-size: 0.78rem;
  font-weight: 820;

  pointer-events: none;
}

.belonging-ecology-placed-layer {
  z-index: 6;

  pointer-events: none;
}

.belonging-placed-item {
  position: absolute;

  max-width: 114px;

  padding: 7px 9px;

  transform:
    translate(-50%, -50%);

  border:
    1px solid
    rgba(255, 255, 255, 0.84);

  border-radius: 999px;

  color: #ffffff;

  box-shadow:
    0 8px 18px
    rgba(41, 37, 78, 0.15),

    inset 0 1px 0
    rgba(255, 255, 255, 0.20);

  font: inherit;
  font-size: 0.59rem;
  font-weight: 760;
  line-height: 1.2;

  text-align: center;

  cursor: pointer;
  pointer-events: auto;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.belonging-placed-item:hover {
  transform:
    translate(-50%, -50%)
    scale(1.04);

  box-shadow:
    0 11px 24px
    rgba(41, 37, 78, 0.20);
}

.belonging-placed-item--closest {
  background:
    linear-gradient(
      145deg,
      #cf7657,
      #e89a72
    );
}

.belonging-placed-item--everyday {
  background:
    linear-gradient(
      145deg,
      #3f8d67,
      #63af83
    );
}

.belonging-placed-item--community {
  background:
    linear-gradient(
      145deg,
      #6551bb,
      #8b79d4
    );
}

.belonging-placed-item--wider {
  background:
    linear-gradient(
      145deg,
      #4d7698,
      #79a1bd
    );
}

.belonging-ecology-tray {
  margin-top: 15px;

  display: grid;

  gap: 9px;
}

.belonging-connection-card {
  width: 100%;
  min-width: 0;
  min-height: 58px;

  padding: 10px 11px;

  display: grid;

  grid-template-columns:
    28px
    minmax(0, 1fr)
    auto;

  gap: 10px;

  align-items: center;

  border:
    1px solid
    rgba(71, 75, 112, 0.12);

  border-radius: 15px;

  background:
    rgba(255, 255, 255, 0.91);

  color: #282d43;

  box-shadow:
    0 6px 17px
    rgba(42, 37, 80, 0.055);

  font: inherit;
  text-align: left;

  cursor: grab;

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}

.belonging-connection-card:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(82, 67, 177, 0.28);

  box-shadow:
    0 9px 21px
    rgba(42, 37, 80, 0.09);
}

.belonging-connection-card.is-dragging {
  opacity: 0.48;
  cursor: grabbing;
}

.belonging-connection-card-icon {
  width: 27px;
  height: 27px;

  display: block;

  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      #ece8ff,
      #dfeee7
    );
}

.belonging-connection-card-content {
  min-width: 0;
}

.belonging-connection-card-label {
  display: block;

  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1.25;
}

.belonging-connection-card-description {
  display: block;

  margin-top: 3px;

  color: #747789;

  font-size: 0.61rem;
  line-height: 1.35;
}

.belonging-connection-card-action {
  color: #5d49bc;

  font-size: 0.62rem;
  font-weight: 760;
}

.belonging-ecology-tray-empty {
  margin: 0;

  color: #696d80;

  font-size: 0.7rem;
  line-height: 1.5;
}

.belonging-custom-form {
  margin-top: 16px;
  padding-top: 15px;

  border-top:
    1px solid
    rgba(75, 78, 112, 0.10);
}

.belonging-custom-label {
  display: block;

  color: #4d5266;

  font-size: 0.69rem;
  font-weight: 760;
}

.belonging-custom-input-row {
  margin-top: 8px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 8px;
}

.belonging-custom-input {
  min-width: 0;
  min-height: 42px;

  padding: 9px 11px;

  border:
    1px solid
    rgba(76, 77, 108, 0.16);

  border-radius: 12px;

  background: #ffffff;

  color: #262a3f;

  font: inherit;
  font-size: 0.72rem;
}

.belonging-custom-add-button {
  min-height: 42px;

  padding: 9px 14px;

  border-radius: 12px;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #5142b4,
      #7363cc
    );

  font: inherit;
  font-size: 0.7rem;
  font-weight: 780;

  cursor: pointer;
}

.belonging-placement-dialog {
  margin-top: 16px;
  padding: 16px;

  border:
    1px solid
    rgba(93, 73, 181, 0.16);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      #f5f2ff,
      #faf9fd
    );

  box-shadow:
    0 10px 26px
    rgba(57, 45, 116, 0.08);
}

.belonging-placement-dialog[hidden] {
  display: none;
}

.belonging-placement-dialog-title {
  margin: 0;

  color: #2e3148;

  font-size: 0.82rem;
  font-weight: 790;
  line-height: 1.4;
}

.belonging-placement-dialog-options {
  margin-top: 12px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}

.belonging-placement-option {
  min-height: 45px;

  padding: 9px 10px;

  border:
    1px solid
    rgba(74, 75, 112, 0.13);

  border-radius: 13px;

  background: #ffffff;

  color: #35394f;

  font: inherit;
  font-size: 0.67rem;
  font-weight: 740;
  line-height: 1.25;

  cursor: pointer;
}

.belonging-placement-option--tray {
  grid-column: 1 / -1;
}

.belonging-placement-cancel {
  margin-top: 10px;
  padding: 8px 2px;

  color: #686c7f;

  font: inherit;
  font-size: 0.68rem;
  font-weight: 720;

  cursor: pointer;
}

.belonging-ecology-summary {
  margin-top: 15px;
  padding: 15px;

  border:
    1px solid
    rgba(82, 72, 156, 0.13);

  border-radius: 17px;

  background:
    rgba(246, 245, 252, 0.91);
}

.belonging-ecology-summary[hidden] {
  display: none;
}

.belonging-ecology-summary-title {
  margin: 0;

  color: #5645ad;

  font-size: 0.7rem;
  font-weight: 830;

  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.belonging-ecology-summary-groups {
  margin-top: 12px;

  display: grid;

  gap: 12px;
}

.belonging-ecology-summary-group-title {
  margin: 0;

  color: #41465a;

  font-size: 0.68rem;
  font-weight: 780;
}

.belonging-ecology-summary-items {
  margin-top: 7px;

  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}

.belonging-ecology-summary-item {
  padding: 6px 9px;

  border:
    1px solid
    rgba(75, 76, 112, 0.11);

  border-radius: 999px;

  background: #ffffff;

  color: #4b5063;

  font-size: 0.65rem;
  font-weight: 700;
}

.belonging-connection-card:focus-visible,
.belonging-placed-item:focus-visible,
.belonging-placement-option:focus-visible,
.belonging-custom-input:focus-visible,
.belonging-custom-add-button:focus-visible {
  outline:
    3px solid
    rgba(82, 64, 186, 0.30);

  outline-offset: 2px;
}

@media (max-width: 760px) {
  .belonging-ecology-layout {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .belonging-ecology-stage-panel,
  .belonging-ecology-tray-panel {
    padding: 15px;

    border-radius: 20px;
  }

  .belonging-ecology-stage {
    max-width: 520px;

    margin-inline: auto;
  }

  .belonging-ecology-tray {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .belonging-ecology-layout {
    margin-top: 20px;
  }

  .belonging-ecology-stage {
    aspect-ratio: 1;
  }

  .belonging-ecology-ring-label {
    font-size: 0.49rem;
  }

  .belonging-ecology-center {
    width: 58px;
    height: 58px;

    font-size: 0.7rem;
  }

  .belonging-placed-item {
    max-width: 88px;

    padding: 6px 7px;

    font-size: 0.52rem;
  }

  .belonging-ecology-tray {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .belonging-connection-card {
    min-height: 61px;
  }

  .belonging-placement-dialog-options {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .belonging-placement-option--tray {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .belonging-ecology-ring,
  .belonging-placed-item,
  .belonging-connection-card {
    transition: none;
  }
}