/* /connect/views/forms.css — Member "Forms" view v1
 * Loaded after views.css so it wins the cascade at equal specificity.
 * Every colour comes from the --bcc-* design tokens; scoped under `.frmx`
 * so nothing leaks into other views.
 * Breakpoints mirror the shell: desktop >= 1025 | tablet 768-1024 |
 * mobile <= 767 | small phone <= 480.
 * ================================================================ */

/* Guard: hidden must beat the flex/grid display rules below. */
.frmx [hidden] { display: none !important; }

.frmx { display: flex; flex-direction: column; }

/* ================================================================
   HERO
=============================================================== */
.frmx-hero {
  position:        relative;
  overflow:        hidden;
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--bcc-s4);
  padding:         var(--bcc-s8) var(--bcc-s6);
  margin-bottom:   var(--bcc-s6);
  border:          1px solid var(--bcc-border-strong);
  border-radius:   var(--bcc-r-xl);
  background:      linear-gradient(135deg, var(--bcc-primary) 0%, var(--bcc-primary-hover) 52%, var(--bcc-accent) 132%);
  box-shadow:      var(--bcc-shadow-2);
}
.frmx-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 88% 8%, rgba(255,255,255,.14) 0%, transparent 56%),
              linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,.24) 100%);
  pointer-events: none;
}
.frmx-hero-inner { position: relative; z-index: 1; max-width: 560px; }
.frmx-hero-chip {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           46px;
  height:          46px;
  margin-bottom:   var(--bcc-s3);
  border-radius:   var(--bcc-r-md);
  background:      rgba(255,255,255,.16);
  color:           #fff;
  backdrop-filter: blur(4px);
}
.frmx-hero-title {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-4xl);
  font-weight:    600;
  letter-spacing: -.01em;
  line-height:    1.1;
  color:          #fff;
  margin:         0 0 var(--bcc-s1);
}
.frmx-hero-sub {
  font-size: var(--bcc-t-md);
  color:     rgba(255,255,255,.85);
  margin:    0;
}

/* ================================================================
   FORM CARD GRID
=============================================================== */
.frmx-list {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   var(--bcc-s4);
}

.frmx-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s3);
  height:         100%;
}
.frmx-card-top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--bcc-s3);
}
.frmx-card-title {
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-lg);
  font-weight: 600;
  color:       var(--bcc-ink);
  margin:      0;
}
.frmx-card-target { flex: 0 0 auto; }
.frmx-card-desc {
  font-size: var(--bcc-t-sm);
  color:     var(--bcc-ink-2);
  margin:    0;
}
.frmx-card-open {
  align-self:  flex-start;
  margin-top:  auto;
  min-height:  44px;
}

/* ================================================================
   STATES (empty / error / loading)
=============================================================== */
.frmx-empty { grid-column: 1 / -1; }
.frmx-empty .bcc-btn { margin-top: var(--bcc-s4); }

.frmx-card-skel { gap: var(--bcc-s4); }
.frmx-skel-short { width: 60%; }

/* ================================================================
   RESPONSIVE
=============================================================== */
@media (max-width: 767px) {
  .frmx-hero { padding: var(--bcc-s6) var(--bcc-s5); }
  .frmx-hero-title { font-size: var(--bcc-t-2xl); }
}
@media (max-width: 480px) {
  .frmx-list { grid-template-columns: 1fr; }
  .frmx-card-open { align-self: stretch; }
}