/* JinVi.us — needs.css */
/* 2026-01-17 — cleaned */

.needs{
  margin:0 auto;
}

.needs-head{
  margin-bottom:1rem;
}

/* Two-column layout */
.needs-grid{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  justify-content:center;
}

/* Columns (default: equal widths) */
.needs-col{
  flex:1 1 0;
  min-width:18rem;
  text-align:left;
}

/* Collapsed behavior: slim rail */
.needs-col.is-collapsed{
  flex:0 0 3.25rem;
  min-width:3.25rem;
}

/* Toggle bar */
.needs-col__togglebar{
  position:sticky;
  top:.75rem;
  z-index:2;
}

.needs-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:.75rem;
  border-radius:.75rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:inherit;
  cursor:pointer;
  text-align:left;
}

/* Collapsed label styling */
.needs-col.is-collapsed .needs-toggle__hint{
  display:none;
}

.needs-col.is-collapsed .needs-toggle__label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}

/* Cards */
.need-card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:1rem;
  padding:1rem;
  margin:0 0 1rem 0;
  text-align:left;
}

.need-card--primary{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
}

.need-card h3{
  margin:0 0 .35rem 0;
}

.need-card p{
  margin:0 0 .6rem 0;
  opacity:.9;
}

.need-card__title{
  font-weight:800;
  margin-bottom:.35rem;
}

.need-card__links a{
  text-decoration:underline;
  text-underline-offset:.2em;
}

/* Make the other column expand when one collapses */
.needs-grid:has(.needs-col--under14.is-collapsed) .needs-col--14plus{
  flex:1 1 0;
}

.needs-grid:has(.needs-col--14plus.is-collapsed) .needs-col--under14{
  flex:1 1 0;
}

/* Responsive: stack columns */
@media (max-width:900px){
  .needs-grid{
    flex-direction:column;
  }

  .needs-col{
    flex:1 1 auto;
    min-width:unset;
  }

  .needs-col.is-collapsed{
    flex:1 1 auto;
    min-width:unset;
  }

  .needs-col.is-collapsed .needs-toggle__label{
    writing-mode:horizontal-tb;
    transform:none;
  }

  .needs-col__togglebar{
    position:static;
  }
}