/* Reusable parts for every Friend Builder page:
   - brick containers: the LEGO wall with studs and seams
   - the header: builder icon, logo, favorites, username, and the account menu
   - collapsible subcontainers: white boxes with a header button (Filters and Info)
   Scripts: js/account.js (header, sign-in, sync), js/components.js (FB.collapsible), FB.fitBrick (brick sizing). */

/* A wall of bricks: width snapped to whole studs, height snapped to whole brick rows (in JS),
   so there are no half bricks or cut-off studs. */
.brick {
  position: relative; align-self: center; width: 100%; width: round(down, 100%, var(--pitch));
  display: flex; flex-direction: column; justify-content: center; padding: 0 10px; margin-top: 5px;
  border-radius: 2px; background: var(--seams) 0 0 / 100px 60px, var(--c);
  box-shadow: inset 0 -1.5px 0 rgba(0,0,0,.14), 0 4px 10px rgba(80,30,70,.15);
}
/* Studs, seen head-on: flat rectangles with cylinder shading, centered on each stud position */
.brick::before, .dock-brick::before {
  content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 5px;
  background:
    linear-gradient(90deg, transparent 5px, rgba(0,0,0,.14) 5px, rgba(255,255,255,.32) 9px,
                    transparent 13px, rgba(0,0,0,.14) 20px, transparent 20px) 0 0 / var(--pitch) 100%,
    var(--c);
  -webkit-mask: repeating-linear-gradient(90deg, transparent 0 5px, #000 5px 20px, transparent 20px 25px);
          mask: repeating-linear-gradient(90deg, transparent 0 5px, #000 5px 20px, transparent 20px 25px);
}

/* Full-width white brick header flush with the top of the page (its studs would be off-screen) */
header.brick {
  background: none; box-shadow: none; width: 100%; margin: 0; border-radius: 0; text-align: center; align-items: center;
  z-index: 3;  /* keeps the account menu above the part containers */
}
header.brick::before { display: none; }

.logo { margin: 0; padding: 8px 0; line-height: 0; }
.logo a { display: inline-block; }
.logo img { width: min(34vw, 210px); height: auto; }

/* ── Header layout: builder icon | logo | favorites, minifigs, username ─────────── */
.header-inner { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px 10px; padding: 12px 6px 0; }
.nav-left { justify-self: start; display: flex; gap: 8px; }
.account { justify-self: end; position: relative; display: flex; align-items: center; gap: 8px; }
/* Phones: logo on its own row, icons on the row below so nothing overlaps */
@media (max-width: 639px) {
  .header-inner { grid-template-columns: 1fr 1fr; grid-template-areas: "logo logo" "left right"; padding-bottom: 8px; }
  .header-inner .logo { grid-area: logo; }
  .nav-left { grid-area: left; }
  .account { grid-area: right; }
}
.nav-btn {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: none; color: var(--logo-purple); box-shadow: none;  /* plain glyph, like the filter icons */
}
.nav-btn svg { width: 22px; height: 22px; }
/* the page you are on: a filled purple button with a white icon */
.nav-btn.here { background: var(--logo-purple); color: #fff; box-shadow: none; }
.acct-btn {
  padding: 9px 16px; border: none; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--logo-purple); color: #fff; font: 600 15px "Poppins", system-ui, sans-serif;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.15);
}
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 200px; padding: 6px;
  background: #fff; border-radius: 10px; box-shadow: 0 6px 20px rgba(60,20,60,.22); text-align: left;
}
.menu[hidden] { display: none; }
.menu .who { padding: 8px 10px 10px; border-bottom: 1px solid #f0e6ee; margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.menu .who strong { display: block; color: var(--ink); font-size: 15px; }
.menu a, .menu button {
  display: block; width: 100%; padding: 9px 10px; border: none; border-radius: 6px; background: none;
  color: var(--ink); font: 500 15px "Poppins", system-ui, sans-serif; text-align: left; text-decoration: none; cursor: pointer;
}

/* ── Collapsible subcontainers ─────────────────────────────────────────────────── */
  /* Filters sit in a white sub-container on the brick, with a header button to show or collapse them */
  .filters { margin: 14px calc(var(--gap, 10px) - 10px) 0; padding: 12px; border-radius: 6px; background: rgba(255,255,255,.92);
             box-shadow: 0 1px 3px rgba(0,0,0,.12); }
  .filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
                  font-weight: 600; font-size: 15px; color: var(--logo-purple); }
  .filters-toggle { width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
                    background: var(--logo-purple); color: #fff; display: grid; place-items: center;
                    box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
  .filters-toggle svg { width: 16px; height: 16px; transform: rotate(180deg); transition: transform .2s; }
  .filters-body { display: flex; flex-direction: column; gap: 28px; }
  .filters-body.tags { gap: 24px; }
  .filters.is-collapsed .filters-toggle svg { transform: none; }
  /* Info box: the same collapse button; collapsed, only its heading shows */
  .info.is-collapsed .info-body { display: none; }
  .info.is-collapsed .filters-head { margin-bottom: 0; }
  .info.is-collapsed .filters-toggle svg { transform: none; }
  .filters.is-collapsed .filters-head { margin-bottom: 0; }
  .filters.is-collapsed .filters-body { display: none; }
  .info {
    /* inset from the brick edge by the same --gap as above/below (the brick already pads 10px) */
    margin: var(--gap, 10px) calc(var(--gap, 10px) - 10px) 0; padding: 6px 12px; border-radius: 6px; background: rgba(255,255,255,.92);
    display: block; padding: 12px;
  }
  .info .filters-head { margin-bottom: 14px; }
  .info-body { display: flex; flex-direction: column; gap: 4px; }
  .irow { display: flex; align-items: baseline; gap: 6px; }
  .ilabel { font-size: 13px; color: var(--muted); }
  .info-body > .ilabel { display: block; margin-top: 6px; }
  .pcolor { font-size: 13px; color: var(--ink); }
  .pname { font-size: 13px; color: var(--muted); line-height: 1.35; }
/* ── Sync icon when disabled: no hover state ───────────────────────────────────── */

/* Your username in the header: purple text, filled purple only on the profile page */
.user-pill { background: transparent; color: var(--logo-purple); box-shadow: none; padding: 9px 12px; }
.user-pill.here { background: var(--logo-purple); color: #fff; }