/* ===========================
   PROJECTS PANEL (full rewrite)
   =========================== */
#projects-wrap.account-panel{
  z-index: 960; /* width comes from .account-panel */
}

/* Mount & chrome */
#projects-wrap .floating-panel__header{
  position: relative;
  padding: var(--s16-p-) var(--s20-p-); 
  min-height: 0;
}

#projects-wrap .floating-panel__body{
  padding:var(--s12-p-) var(--s14-p-) var(--s12-p-) var(--s12-p-); overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  width:100%; box-sizing:border-box;
  display:flex; flex-direction:column; flex:1 1 0; min-height:0;
}
/* Scrollbar track: keep it away from border-radius at top and bottom */
#projects-wrap.account-panel > .floating-panel__body::-webkit-scrollbar-track{
  margin-top: var(--s10-p-);
  margin-bottom: var(--s32-p-);
}
#projects-mount{ width:100%; max-width:640px; margin:0 auto; min-height:0; }
#projects-wrap .projects-ui{ width:100%; box-sizing:border-box; }

/* ---------- Toolbar ---------- */
/* ---------- Toolbar (match Account style) ---------- */
.projects-toolbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:var(--s18-p-);
  margin:0; padding:0 0 var(--s12-p-) 0;
  background: var(--ak-offwhite);
}

.projects-search{
  flex:0 1 420px; height:var(--s40-p-);
  border-radius:var(--ak-radius-pill);
  background:var(--ak-light);
  display:flex; align-items:center; gap:var(--s12-p-); padding:0 var(--s18-p-);
  border: var(--ak-border-subtle);
}

.projects-search__icon{ width:var(--s20-p-); height:var(--s20-p-); opacity:.65; }

.space-edit-name,
.projects-search__input{
  flex:1 1 auto; border:0; outline:0; background:transparent;
  font-size:var(--account-size_reg);
  font-weight:var(--account--font-weight_1);
  color:var(--ak-dark) !important;
}

.projects-new-btn{
  flex:0 0 auto; height:var(--s40-p-); padding:0 20px;
  margin-left:auto;
  border: none;
  border-radius:var(--ak-radius-pill);
  background: var(--ak-accent);
   color:var(--ak-white);
  font-size:var(--account-size_large);
  font-weight:var(--account--font-weight_1);
  cursor:pointer; text-align:center;
}
/* Disabled state must override hover/active */
.projects-new-btn.is-disabled,
.projects-new-btn:disabled,
.projects-new-btn[aria-disabled="true"]{
  background: var(--ak-mid-gray);
  color: var(--ak-light);
  cursor: not-allowed;
  pointer-events: none; /* prevents hover/active entirely */
  opacity: .65;
}

/* Keep hover/active only for enabled */
.projects-new-btn:not(.is-disabled):not(:disabled):not([aria-disabled="true"]):hover{
  background: var(--ak-active);
}
.projects-new-btn:not(.is-disabled):not(:disabled):not([aria-disabled="true"]):active{
  background: var(--ak-feedbackbg);
}


.projects-columns,
.project-row{
  display:grid;
  grid-template-columns:var(--projects-grid);
  column-gap:var(--s12-p-);
  align-items:center;
  box-sizing:border-box;
  padding:0 var(--s12-p-); /* avoids last-column clipping against rounded row */
}

.projects-columns{
  margin:0 0 var(--s12-p-) 0;
  font-family:var(--font-family);
  font-size:var(--account-size_reg);
  font-weight:var(--account--font-weight_1);
  color:var(--ak-dark);
}

.projects-columns > *{ justify-self:start; text-align:left; margin:0; padding:0; white-space:nowrap; }
.projects-col--area, .projects-col--spaces{ justify-self:start; text-align:left; }


.projects-columns > *,
.project-row > *{ min-width: 0; }

.project-area,
.project-spaces{
  justify-self:end;
  text-align:left;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.project-spaces{ font-weight: var(--account--font-weight_2); }

.project-spaces-wrap{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:var(--s8-p-);
}

.project-expand-ico{
  width:var(--s16-p-);
  height:var(--s16-p-);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.project-expand-ico img{
  width:var(--s16-p-);
  height:var(--s16-p-);
  display:block;
  opacity:.9;
  transition:transform .16s ease;
}

.project-row[aria-expanded="true"] .project-expand-ico img{
  transform:rotate(180deg);
}


/* Sort arrow */
#projects-sort-modified{ position:relative; cursor:pointer; user-select:none; padding-right:var(--s260-p-); }
#projects-sort-modified::after{
  content:""; position:absolute; right:0; top:50%; width:18px; height:18px; transform:translateY(-50%);
  background-color:var(--ak-white);
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
  mask-repeat:no-repeat; mask-position:center; mask-size:contain;
}
#projects-sort-modified[data-sort="desc"]::after{ -webkit-mask-image:url("/icons/arrowdown.svg"); mask-image:url("/icons/arrowdown.svg"); }
#projects-sort-modified[data-sort="asc"]::after{ -webkit-mask-image:url("/icons/arrowup.svg");   mask-image:url("/icons/arrowup.svg");   }

/* ---------- List + Rows ---------- */
/* ---------- List + Rows (match Account rows) ---------- */
/* ---------- List + Rows (pill “button” rows) ---------- */
.projects-list{ display:flex; flex-direction:column; gap:var(--grid-gap); }

.project-row{
  height: var(--ak-height-pill);
  border-radius: var(--ak-radius-pill);
  background: var(--ak-dark);
  padding: 0 var(--s12-p-);                 /* keep grid padding */
  border: 0;
  transition: background .12s ease, box-shadow .12s ease;
}
.project-row:hover{ background: var(--ak-mid-gray); }
.project-row:active{ background: var(--ak-dark); }
.project-row:focus-within{ box-shadow: 0 0 0 2px #0000001f inset; }


.project-row > *{
  font-size:var(--account-size_reg);
  font-weight:var(--account--font-weight_1);
  color:var(--ak-offwhite);
  white-space:nowrap;
}
.project-row > *{ justify-self:start; text-align:left; }

.project-row{ cursor: pointer; }
.project-row :where(input,button,a,label){ cursor: default; }


/* Star button */
.project-delete,
.space-delete,
.project-star{
  justify-self:center; width:var(--s28-p-); height:var(--s28-p-); display:grid; place-items:center;
  padding:0; border:0; background:transparent; cursor:pointer; border-radius:50%;
}
.project-delete:hover,
.space-delete:hover,
.project-star:hover{ background:rgba(0,0,0,.06); }

.project-delete img,
.space-delete img,
.project-star img{ width:var(--s16-p-); height:var(--s16-p-); opacity:.55; }

.project-star.is-starred img{ opacity:.95; }

.project-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.editable{ display:inline-flex; align-items:center; gap:var(--s8-p-); min-width:0; }
.edit-icon{ width:var(--s16-p-); height:var(--s16-p-); opacity:.65; flex:0 0 auto; }

.editable input{
  border:0; outline:0; background:transparent; width:100%; min-width:0; font:inherit; color:var(--ak-white);
}

.project-name input{ font-weight: var(--ak--font-weight_600); }


/* Kill any legacy dots if still emitted */
.project-spaces .dot, .project-spaces .spaces-plus{ display:none !important; }

/* Group (row + expand) */
.project-item{ display:flex; flex-direction:column; gap:var(--s10-p-); }
.project-expand{
  border-radius:var(--ak-radius-pill);
 background:transparent;
  padding:var(--s12-p-); box-sizing:border-box;
}
.space-row{
  display:grid;
grid-template-columns:
32px
  18px
  minmax(15ch, 2fr)
  6ch
  6ch
  6ch
  20px
  minmax(16ch, 2.2fr)
  32px;
  align-items:center;
  column-gap:var(--s12-p-);
  min-height: var(--s42-p-);
  padding: var(--s12-p-) var(--s12-p-);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  width:100%;
  box-sizing:border-box;
  border-bottom: var(--s1-p-) solid rgba(0,0,0,0.14); /* simple divider */
}
.space-row:last-child{
  border-bottom: 0;
}

.space-row > *{ min-width:0; }

.space-name{
  font-weight: var(--ak--font-weight_600);
}
.space-modified,
.space-area,
.space-spec{
  font-size: var(--app_font_small-size-ui);

}

.space-actions{
  display:flex;
  align-items:center;
  gap:var(--s16-p-);

  justify-self:stretch;     /* fill the grid column */
  justify-content:flex-end;

  white-space:nowrap;
}
.space-actions button{
  display:inline-flex; align-items:center; gap:var(--s6-p-);
  font-size: var(--app_font_small-size-ui);
}
.space-actions img{ width:var(--s14-p-); height:var(--s14-p-); opacity:.8; }

.projectwap-add-space{ padding: var(--s8-p-) 0 0 0; } /* keep Add Space under the flat list */




.space-row button{
  appearance:none; border:0; background:transparent; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer;
}
.space-rename,
.space-open{ width:var(--s28-p-); height:var(--s28-p-); display:grid; place-items:center; border-radius:50%; }
.space-rename:hover,
.space-open:hover{ background: var(--ak-dark)}
.space-rename img,
.space-open img{ width:var(--s16-p-); height:var(--s16-p-); opacity:.75; }

.space-name{ font-weight: var(--account--font-weight_2); color: var(--ak-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.space-area{ font-variant-numeric: tabular-nums; }
.space-hasref{
  width:var(--s20-p-);
  height:var(--s20-p-);
  display:grid;
  place-items:center;
  justify-self:center;
}

.space-hasref[hidden]{
  display:grid !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.space-hasref img{
  width:var(--s16-p-);
  height:var(--s16-p-);
  display:block;
  opacity:.72;
}

.projectwap-add-space{ margin-top: var(--s12-p-); }
.project-add-space--mobile{
  width:100%; height: var(--s36-p-);
  border-radius: var(--ak-radius-pill);
  border: var(--s1-p-) solid var(--ak-dark);
  background: transparent; color: var(--ak-dark);
  font: inherit; font-size: var(--app_font_regular-size-ui); font-weight: var(--ak--font-weight_600);
  cursor: pointer;
}
.project-add-space--mobile:hover{ background: var(--ak-hover); }
.project-add-space--mobile:active{ background: rgba(0,0,0,0.07); }



.space-row:last-child{ border-bottom: 0; }
.space-name{ font-weight: var(--ak--font-weight_600); color: var(--ak-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.space-area{ font-variant-numeric: tabular-nums; }

/* One-time "new floor" highlight */
.space-row.is-new-highlight{
  outline: var(--s1-p-) solid var(--ak-accent);
  outline-offset: 0;
  border-radius: var(--ak-radius-pill);
}
.space-row.is-new-highlight{
  border-bottom-color: transparent;
}
.space-edit-ico{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  width:var(--s28-p-);
  height:var(--s28-p-);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}

.space-edit-ico::before{
  content:"";
  width:var(--s16-p-);
  height:var(--s16-p-);

  background-color: var(--ak-dark);
  -webkit-mask-image: url("/icons/edit.svg");
  mask-image: url("/icons/edit.svg");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;

  opacity:.65;
}
.space-edit-name.is-highlight{
  outline: var(--s1-p-) solid var(--ak-accent);
  border-radius: var(--ak-radius-pill);
}



/* Add Space button (full width pill) */
.projectwap-add-space{ margin-top: var(--s12-p-); }
.projectwap-add-space .project-add-space{
  margin-top: var(--s12-p-);
  width:100%;
  height: var(--s40-p-);
  border-radius: var(--ak-radius-pill);
  border: var(--s1-p-) solid var(--ak-dark);
  background: transparent;
  color: var(--ak-dark);
  font: inherit;
  font-size: var(--account-size_reg);
  font-weight: var(--account--font-weight_1);
  cursor: pointer;
}
.projectwap-add-space .project-add-space:hover{ background: var(--ak-hover); }
.projectwap-add-space .project-add-space:active{ background: rgba(0,0,0,0.07); }
.project-add-space--desktop{
  margin-top: var(--s12-p-);
  width:80%; height: var(--s24-p-);
  border-radius: var(--ak-radius-pill);
  border: var(--s1-p-) solid var(--ak-demo);
  background: transparent; color: var(--ak-dark);
  font: inherit; font-size: var(--app_font_regular-size-ui); font-weight: var(--ak--font-weight_400);
  cursor: pointer;
}
.project-add-space--desktop:hover{ background: var(--ak-hover); }
.project-add-space--desktop:active{ background: rgba(0,0,0,0.07); }

.projects-plus-note {
  margin-top: var(--s48-p-);
  font-size: var(--app_font_small-size-ui);
  line-height: var(--app_line-height-ui);
  color: var(--ak-mid-gray);
  text-align: center;
}

.projects-plus-note .link-underline {
  text-decoration: underline;
  cursor: pointer;
}

.project-container--nav .project-container__top-control{
  border-bottom: var(--s1-p-) solid rgba(0,0,0,0.16);
  padding-bottom: var(--s4-p-);
  margin-bottom: var(--s4-p-);
}



.project-container--nav .project-nav-meta-label{
  margin:0 0 0 var(--s6-p-);
  font-size: var(--app_font_small-size-ui);
  font-weight: var(--ak--font-weight_400);
  color: var(--ak-mid-gray);
  line-height: 1;
}

.project-container--nav .project-nav-head__labelwrap{
  min-width: 0;
}

.project-container--nav .project-nav-head__label{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-container--nav .project-nav-head__open{
  flex: 0 0 auto;
  width: var(--s32-p-);
  height: var(--s32-p-);
  border-radius: var(--ak-radius-pill);
  border: var(--s1-p-) solid rgba(0,0,0,0.10);
  background: var(--ak-white-sec);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.project-container--nav .project-nav-head__open:hover{
  background: var(--ak-hover);
}

.project-container--nav .project-nav-head__open:focus-visible{
  outline: var(--s1-p-) solid rgba(0,0,0,0.14);
  outline-offset: -1px;
}

.project-container--nav .project-nav-head__chevron{
  width: var(--s16-p-);
  height: var(--s16-p-);
  background-color: var(--ak-icon-default);
  mask: url("/icons/add-icon.svg") center/contain no-repeat;
  -webkit-mask: url("/icons/add-icon.svg") center/contain no-repeat;
}

.project-container--nav .project-nav-head__sr{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.project-container--nav .project-spaces-overview{
  display:flex;
  flex-direction:column;
  min-height:0;
  gap:var(--s4-p-);
}

.project-container--nav .project-spaces-overview__list{
  display:flex;
  flex-direction:column;
  gap:0;
  position:relative;
  min-height:var(--s64-p-);
  max-height:var(--s72-p-);
  padding-right: var(--s1-p-);
  overflow-y:scroll;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  --overview-scroll-track-width: var(--s5-p-);
  --overview-scroll-thumb-size: var(--s24-p-);
  --overview-scroll-thumb-offset: 0px;
}

.project-container--nav .project-spaces-overview__list::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:var(--overview-scroll-track-width);
  border-radius:var(--ak-radius-pill);
  display:none;
  pointer-events:none;
}

.project-container--nav .project-spaces-overview__list::after{
  content:"";
  position:absolute;
  top:var(--overview-scroll-thumb-offset);
  right:0;
  width:var(--overview-scroll-track-width);
  height:var(--overview-scroll-thumb-size);
  min-height:var(--s16-p-);
  border-radius:var(--ak-radius-pill);
  background:none;
  pointer-events:none;
}

.project-container--nav .project-spaces-overview__list::-webkit-scrollbar{
  width: var(--s8-p-);
  -webkit-appearance: none;
}

.project-container--nav .project-spaces-overview__list::-webkit-scrollbar-thumb{
  background: none;
  border-radius: var(--ak-radius-pill);
  border: none;
}

.project-container--nav .project-spaces-overview__list::-webkit-scrollbar-track{
   background: none;
}
.project-container--nav .project-spaces-overview__item{
  width:100%;
  display:grid;
  grid-template-columns:var(--s18-p-) minmax(0, 1fr) var(--s18-p-);
  align-items:center;
  column-gap:var(--s8-p-);
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ak-dark);
  min-height:var(--s28-p-);
  height:var(--s28-p-);
  max-height:var(--s28-p-);
  flex:0 0 var(--s28-p-);
  box-sizing:border-box;
  padding:0 var(--s12-p-) 0 var(--s12-p-);
  cursor:pointer;
  transition:background-color .16s ease;
}
.project-container--nav .project-spaces-overview__item::before{
  content:"";
  width:var(--s16-p-);
  height:var(--s16-p-);
  display:block;
  background-color:var(--ak-dark);
  -webkit-mask-image:url("/icons/po_area_icon.svg");
  mask-image:url("/icons/po_area_icon.svg");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  opacity:.8;
}

.project-container--nav .project-spaces-overview__item:last-child{
  border-bottom:0;
}

.project-container--nav .project-spaces-overview__item:hover{
  background:rgba(0,0,0,0.03);
}

.project-container--nav .project-spaces-overview__item:focus-visible{
  outline:var(--s1-p-) solid rgba(0,0,0,0.14);
  outline-offset:-1px;
}

.project-container--nav .project-spaces-overview__name{
  display:block;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:var(--app_font_step-size-ui);
  font-weight:var(--ak--font-weight_400);
}

.project-container--nav .project-spaces-overview__item.is-active .project-spaces-overview__name{
  font-weight:var(--ak--font-weight_400);
}

.project-container--nav .project-spaces-overview__chevron{
  width:var(--s22-p-);
  height:var(--s22-p-);
  justify-self:end;
  opacity:.75;
  position:relative;
}

.project-container--nav .project-spaces-overview__chevron::before{
  content:"";
  position:absolute;
  inset:var(--s4-p-);
  background-color:var(--ak-dark);
  -webkit-mask-image:url("/icons/chevron-right.svg");
  mask-image:url("/icons/chevron-right.svg");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.project-container--nav .project-spaces-overview__item:hover .project-spaces-overview__chevron{
  background:var(--ak-dark);
  border-radius:50%;
}

.project-container--nav .project-spaces-overview__item:hover .project-spaces-overview__chevron::before{
  background-color:var(--ak-offwhite);
}

.project-container--nav .project-spaces-overview__actions{
  margin-top:auto;
  display:flex;
  justify-content:center;
}






/* ===========================
   Mobile-only cleanup
   =========================== */
@media (max-width: 768px){
  .project-container--nav .project-spaces-overview__actions{
    display:none;
  }

  #projects-wrap .floating-panel__body{
    padding:var(--s10-p-);
  }

  .projects-toolbar{
    flex-wrap:wrap;
    gap:var(--s10-p-);
    padding-bottom:var(--s10-p-);
  }

  .projects-search{
    flex:1 1 100%;
    min-width:0;
  }

  .projects-new-btn{
    width:100%;
    margin-left:0;
  }

  .projects-columns,
  .project-row{
    grid-template-columns: var(--s32-p-) minmax(0,1fr) 8ch 5ch;
    column-gap:var(--s8-p-);
    padding:0 var(--s10-p-);
  }

  .projects-col--ref,
  .projects-col--modified,
  .project-ref,
  .project-modified{
    display:none;
  }

  .projects-columns{
    font-size:var(--app_font_small-size-ui);
    margin-bottom:var(--s8-p-);
  }

  .project-row{
    min-height:var(--s40-p-);
    height:auto;
  }

  .project-expand{
    padding:var(--s10-p-) var(--s8-p-);
  }

  .spaces-list{
    gap:var(--s8-p-);
  }
  .space-row{
    grid-template-columns: var(--s28-p-) var(--s24-p-) minmax(0,1fr) var(--s20-p-) auto;
    column-gap:var(--s8-p-);
    row-gap:var(--s6-p-);
    padding:var(--s10-p-) var(--s8-p-);
    min-height:0;
    align-items:center;
  }

  .space-delete{ grid-column:1; grid-row:1; }

  .space-edit-ico,
  .space-rename{ grid-column:2; grid-row:1; }

  .space-edit-name,
  .space-name{
    grid-column:3;
    grid-row:1;
    min-width:0;
  }

  .space-open{ grid-column:4; grid-row:1; }
  .space-hasref{
    grid-column:4;
    grid-row:1;
  }

  .space-open{
    grid-column:5;
    grid-row:1;
  }
  .space-modified,
  .space-spec{
    display:none;
  }

  .space-area{
    grid-column:3;
    grid-row:2;
    justify-self:start;
    text-align:left;
    opacity:.8;
  }

  .space-actions{
    grid-column:4;
    grid-row:2;
    justify-self:end;
    justify-content:flex-end;
    gap:var(--s8-p-)    ;
  }

  .space-actions button{
    font-size:var(--app_font_small-size-ui);
  }
}