/* Recipe comment management — 2026-08-14. */

.recipe-comment-manage--public>summary{
  position:relative!important;
  display:block!important;
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  padding:0!important;
  border:1px solid #cddbd7!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.96)!important;
  color:#315d60!important;
  box-shadow:0 2px 8px rgba(21,56,69,.08)!important;
  cursor:pointer!important;
  list-style:none!important;
  transition:border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease!important;
}
.recipe-comment-manage--public>summary::-webkit-details-marker{display:none!important}
.recipe-comment-manage--public>summary::marker{content:""}
.recipe-comment-manage--public>summary:hover,
.recipe-comment-manage--public[open]>summary{
  border-color:#8fbab4!important;
  background:#f2f8f6!important;
  color:#087c75!important;
  box-shadow:0 3px 10px rgba(21,56,69,.12)!important;
}
.recipe-comment-manage--public>summary:focus-visible{
  outline:3px solid rgba(8,124,117,.18)!important;
  outline-offset:2px!important;
}
.recipe-comment-overflow-dots{
  position:absolute;
  left:50%;
  top:50%;
  display:grid;
  grid-template-columns:repeat(3,3px);
  gap:3px;
  width:15px;
  height:3px;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.recipe-comment-overflow-dots>span{display:block;width:3px;height:3px;border-radius:50%;background:currentColor}

.recipe-comment-manage--public .recipe-comment-manage__panel{
  width:190px!important;
  max-height:none!important;
  overflow:visible!important;
  padding:6px!important;
  gap:2px!important;
  border-radius:11px!important;
  box-shadow:0 14px 36px rgba(21,56,69,.14)!important;
}
.recipe-comment-manage:not(.recipe-comment-manage--public) .recipe-comment-manage__panel.is-quick-menu{
  width:min(220px,100%)!important;
  padding:6px!important;
  gap:2px!important;
}
.recipe-comment-quick-menu{display:grid;gap:2px}
.recipe-comment-quick-action{
  display:flex;
  align-items:center;
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#23434d;
  font:inherit;
  font-size:.72rem;
  font-weight:760;
  text-align:left;
  cursor:pointer;
}
.recipe-comment-quick-action:hover,.recipe-comment-quick-action:focus-visible{background:#f2f7f5;outline:none}
.recipe-comment-quick-action--danger{color:#8b1e3f}
.recipe-comment-quick-action--danger:hover,.recipe-comment-quick-action--danger:focus-visible{background:#fff2f4}

.recipe-comment-editor-dialog{
  width:min(620px,calc(100vw - 32px));
  max-width:none;
  max-height:min(88dvh,760px);
  padding:0;
  border:0;
  border-radius:17px;
  background:#fff;
  color:#263f48;
  box-shadow:0 28px 90px rgba(13,40,48,.28);
  overflow:hidden;
}
.recipe-comment-editor-dialog::backdrop{background:rgba(13,33,39,.5);backdrop-filter:blur(2px)}
.recipe-comment-editor-shell{display:grid;grid-template-rows:auto minmax(0,1fr);max-height:min(88dvh,760px)}
.recipe-comment-editor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 18px;
  border-bottom:1px solid #e1e8e6;
  background:#fbfcfb;
}
.recipe-comment-editor-head>div{min-width:0}
.recipe-comment-editor-head .eyebrow{margin:0 0 2px;font-size:.57rem}
.recipe-comment-editor-head h3{margin:0;color:#153845;font-size:1.15rem;line-height:1.2}
.recipe-comment-editor-close{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid #d5dfdc;
  border-radius:50%;
  background:#fff;
  color:#466067;
  font-size:1.2rem;
  cursor:pointer;
}
.recipe-comment-editor-close:hover{background:#f2f7f5;color:#153845}
.recipe-comment-editor-dialog .recipe-comment-edit-form{
  display:grid!important;
  gap:15px!important;
  min-height:0;
  max-height:calc(min(88dvh,760px) - 66px);
  padding:17px 18px 18px;
  overflow:auto;
  overscroll-behavior:contain;
}
.recipe-comment-editor-dialog .recipe-comment-manage__title{display:none}
.recipe-comment-editor-dialog .field{margin:0}
.recipe-comment-editor-dialog .field>label{font-size:.7rem;font-weight:800;color:#27444d}
.recipe-comment-editor-dialog .recipe-comment-edit-form textarea{
  min-height:92px!important;
  max-height:190px;
  padding:10px 12px;
  line-height:1.55;
  resize:vertical;
}
.recipe-comment-editor-dialog .recipe-comment-edit-photos{
  display:grid;
  gap:0;
  overflow:hidden;
  border:1px solid #dfe7e4;
  border-radius:12px;
  background:#fff;
}
.recipe-comment-editor-dialog .recipe-comment-edit-photo{
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr)!important;
  gap:11px!important;
  align-items:start;
  padding:10px!important;
  border:0!important;
  border-bottom:1px solid #edf1ef!important;
  border-radius:0!important;
  background:#fff!important;
}
.recipe-comment-editor-dialog .recipe-comment-edit-photo:last-child{border-bottom:0!important}
.recipe-comment-editor-dialog .recipe-comment-edit-photo>img{
  width:64px!important;
  height:64px!important;
  border-radius:8px!important;
  object-fit:cover;
}
.recipe-comment-editor-dialog .recipe-comment-edit-photo>div{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;gap:7px 8px!important;align-items:end!important}
.recipe-comment-editor-dialog .recipe-comment-edit-photo>div>label:first-child{grid-column:1/-1;display:grid;gap:4px;color:#5b6e74;font-size:.6rem;font-weight:760}
.recipe-comment-editor-dialog .recipe-comment-edit-photo input[type="text"]{min-height:35px;padding:7px 9px;font-size:.72rem}
.recipe-comment-editor-dialog .recipe-comment-file-choice{
  position:relative;
  grid-column:2;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px;
  padding:6px 9px;
  border:1px solid #bfd2cd;
  border-radius:8px;
  background:#f7fbfa;
  color:#176b67;
  font-size:.62rem!important;
  font-weight:820!important;
  cursor:pointer;
  overflow:hidden;
}
.recipe-comment-editor-dialog .recipe-comment-file-choice input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.recipe-comment-editor-dialog .recipe-comment-remove-choice{
  grid-column:3;
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:34px;
  margin:0;
  padding:6px 9px;
  border:1px solid #e1c7cd;
  border-radius:8px;
  background:#fff;
  color:#8b1e3f;
  font-size:.61rem!important;
  font-weight:800!important;
  cursor:pointer;
}
.recipe-comment-editor-dialog .recipe-comment-remove-choice input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;
  display:grid;
  place-items:center;
  flex:0 0 18px;
  width:18px;
  height:18px;
  margin:0;
  border:1.5px solid #bd8794;
  border-radius:5px;
  background:#fff;
  cursor:pointer;
}
.recipe-comment-editor-dialog .recipe-comment-remove-choice input[type="checkbox"]::before{
  content:"";
  width:5px;
  height:9px;
  margin-top:-2px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg) scale(0);
  transform-origin:center;
  transition:transform .12s ease;
}
.recipe-comment-editor-dialog .recipe-comment-remove-choice input[type="checkbox"]:checked{border-color:#8b1e3f;background:#8b1e3f}
.recipe-comment-editor-dialog .recipe-comment-remove-choice input[type="checkbox"]:checked::before{transform:rotate(45deg) scale(1)}
.recipe-comment-editor-dialog .recipe-comment-remove-choice input[type="checkbox"]:focus-visible{outline:3px solid rgba(139,30,63,.17);outline-offset:2px}
.recipe-comment-editor-dialog .recipe-comment-remove-choice:has(input:checked){border-color:#d7a8b3;background:#fff4f6}
.recipe-comment-editor-dialog .recipe-comment-edit-photo.is-remove-selected{background:#fff7f8!important;opacity:.72}
.recipe-comment-editor-dialog .recipe-community__upload{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0 0;
  border-top:1px solid #e8eeec;
}
.recipe-comment-add-photo-control{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:7px 10px;
  border:1px dashed #8fbab4;
  border-radius:9px;
  background:#f8fbfa;
  color:#176b67;
  font-size:.66rem;
  font-weight:820;
  cursor:pointer;
}
.recipe-comment-add-photo-control:hover{border-color:#087c75;background:#f0f8f6}
.recipe-comment-editor-file-input{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.recipe-comment-add-photo-hint{margin:0;color:#75858a;font-size:.6rem;line-height:1.4;text-align:right}
.recipe-comment-editor-dialog [data-comment-edit-fields]{display:grid;gap:8px}
.recipe-comment-editor-dialog .recipe-comment-new-photo-field{padding:9px 10px!important;border:1px solid #dfe7e4;border-radius:10px;background:#fbfcfb}
.recipe-comment-editor-dialog .recipe-comment-new-photo-field label{display:grid;gap:5px;font-size:.63rem}
.recipe-comment-editor-dialog .recipe-comment-review-note{margin:0!important;padding:9px 10px!important;font-size:.66rem!important;line-height:1.48!important}
.recipe-comment-editor-footer{
  position:sticky;
  bottom:-18px;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin:0 -18px -18px;
  padding:12px 18px;
  border-top:1px solid #e1e8e6;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
}
.recipe-comment-editor-footer .button{min-height:38px;padding:7px 12px;font-size:.67rem}
.recipe-comment-editor-footer .button[type="submit"]:disabled{opacity:.44;cursor:not-allowed;box-shadow:none;transform:none}

@media(max-width:620px){
  .recipe-comment-editor-dialog{width:100vw;max-height:100dvh;border-radius:0;margin:auto 0 0}
  .recipe-comment-editor-shell{max-height:100dvh}
  .recipe-comment-editor-dialog .recipe-comment-edit-form{max-height:calc(100dvh - 64px);padding:14px 14px 16px}
  .recipe-comment-editor-dialog .recipe-comment-edit-photo{grid-template-columns:56px minmax(0,1fr)!important}
  .recipe-comment-editor-dialog .recipe-comment-edit-photo>img{width:56px!important;height:56px!important}
  .recipe-comment-editor-dialog .recipe-comment-edit-photo>div{grid-template-columns:1fr 1fr!important}
  .recipe-comment-editor-dialog .recipe-comment-edit-photo>div>label:first-child{grid-column:1/-1}
  .recipe-comment-editor-dialog .recipe-comment-file-choice{grid-column:1}
  .recipe-comment-editor-dialog .recipe-comment-remove-choice{grid-column:2}
  .recipe-comment-editor-dialog .recipe-community__upload{align-items:flex-start;flex-direction:column}
  .recipe-comment-add-photo-hint{text-align:left}
  .recipe-comment-editor-footer{bottom:-16px;margin:0 -14px -16px;padding:11px 14px}
  .recipe-comment-editor-footer .button{flex:1}
}