/* Sits inline in the footer credit line, just after "Khiara Salvani".
   Deliberately quiet — visitors have no reason to notice it. */
.cms-gear{
  display:inline-block;vertical-align:baseline;margin-left:8px;
  padding:0;border:none;background:none;
  color:var(--muted);font-size:11px;line-height:1;
  cursor:pointer;opacity:.4;transition:opacity .2s,color .2s;
}
.cms-gear:hover{opacity:1;color:var(--khaki);}
.cms-gear.cms-admin{color:var(--khaki);opacity:.9;}

.cms-modal-backdrop{
  position:fixed;inset:0;background:rgba(23,22,20,.5);
  display:none;align-items:center;justify-content:center;z-index:600;
}
.cms-modal-backdrop.open{display:flex;}
.cms-modal{
  background:var(--paper);padding:28px;border-radius:10px;
  width:min(90vw,320px);font-family:var(--sans);
}
.cms-modal h3{margin:0 0 14px;font-family:var(--display);font-weight:400;font-size:22px;}
.cms-modal label{display:block;font-size:13px;margin:12px 0 4px;color:var(--muted);}
.cms-modal input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:14px;}
.cms-modal-actions{display:flex;justify-content:space-between;align-items:center;margin-top:18px;}
.cms-modal-error{color:#a33;font-size:13px;min-height:16px;margin-top:8px;}
.cms-modal-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;}
.cms-modal button[type="submit"]{background:var(--khaki);color:#fff;border:none;border-radius:20px;padding:8px 18px;cursor:pointer;font-size:14px;}

.cms-edit-badge{
  position:fixed;right:64px;bottom:18px;z-index:500;
  background:var(--khaki);color:#fff;border-radius:20px;
  padding:8px 16px;font-family:var(--sans);font-size:13px;
  display:none;align-items:center;gap:10px;
}
.cms-edit-badge.visible{display:flex;}
.cms-edit-badge button{background:none;border:none;color:#fff;text-decoration:underline;cursor:pointer;font-size:13px;}

.cms-toast{
  position:fixed;left:50%;bottom:70px;transform:translate(-50%,10px);
  background:rgba(23,22,20,.85);color:#fff;padding:8px 16px;border-radius:20px;
  font-family:var(--sans);font-size:13px;opacity:0;transition:opacity .2s, transform .2s;
  z-index:700;pointer-events:none;
}
.cms-toast.show{opacity:1;transform:translate(-50%,0);}

.cms-editable{outline:1px dashed transparent;cursor:text;transition:outline-color .15s;}
.cms-editable:hover{outline-color:var(--khaki);}
.cms-editable.cms-editing{outline:1px solid var(--khaki);outline-offset:2px;}

.cms-editable-attr{outline:1px dashed transparent;cursor:pointer;transition:outline-color .15s;}
.cms-editable-attr:hover{outline-color:var(--khaki);}

.cms-image-overlay{
  display:none;position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  padding:8px 16px;background:rgba(23,22,20,.75);color:#fff;border:none;
  border-radius:20px;font-family:var(--sans);font-size:13px;cursor:pointer;z-index:50;
}
.cms-image-overlay.cms-visible{display:block;}

.cms-collection-tile{position:relative;}
.cms-collection-tile.cms-dragging{opacity:.35;}
.cms-collection-delete{
  display:none;position:absolute;top:6px;right:6px;width:24px;height:24px;
  border-radius:50%;border:none;background:rgba(23,22,20,.75);color:#fff;
  cursor:pointer;font-size:15px;line-height:1;z-index:60;
}
.cms-editmode .cms-collection-delete{display:block;}
.cms-collection-swap{
  display:none;position:absolute;top:6px;right:36px;width:24px;height:24px;
  border-radius:50%;border:none;background:rgba(23,22,20,.75);color:#fff;
  cursor:pointer;font-size:13px;line-height:1;z-index:60;
}
.cms-editmode .cms-collection-swap{display:block;}
.cms-collection-add{
  display:none;align-items:center;justify-content:center;min-height:120px;
  border:1px dashed var(--khaki);background:transparent;color:var(--khaki);
  font-family:var(--sans);font-size:14px;cursor:pointer;border-radius:6px;
}
.cms-editmode .cms-collection-add{display:flex;}

.cms-collection-add.shot{aspect-ratio:3/4;width:100%;}

#filmstripTrack .cms-collection-add{width:min(60vw,340px);aspect-ratio:4/5;flex-shrink:0;}

/* index.html styles the filmstrip thumbnails with `.strip .frames button`,
   which outranks a two-class selector and also matches these controls (they
   are buttons in the same container). Everything below is scoped through
   #frames so it wins, and explicitly resets the thumbnail look it inherits:
   the 52x34 box, position:relative, grayscale and the .45 opacity. */
.cms-hero-thumb{position:relative;}

#frames .cms-hero-thumb .cms-collection-delete{
  position:absolute;top:-7px;right:-7px;
  width:18px;height:18px;padding:0;
  border-radius:50%;border:none;
  background:rgba(23,22,20,.85);color:#fff;
  font-size:12px;line-height:1;
  filter:none;opacity:1;z-index:60;
}
#frames .cms-hero-thumb .cms-collection-delete:hover{background:#a33;}

#frames .cms-hero-thumb .cms-collection-swap{
  position:absolute;top:-7px;left:-7px;
  width:18px;height:18px;min-height:0;padding:0;
  border-radius:50%;border:none;
  background:rgba(23,22,20,.85);color:#fff;
  font-size:10px;line-height:1;
  filter:none;opacity:1;z-index:60;
}
#frames .cms-hero-thumb .cms-collection-swap:hover{background:var(--khaki);}

#frames.cms-editmode{gap:14px;}
#frames .cms-collection-add{
  position:relative;width:auto;min-width:64px;height:34px;min-height:0;
  padding:0 12px;font-size:11px;white-space:nowrap;
  border:none;border-radius:2px;
  background:var(--khaki);color:#fff;
  filter:none;opacity:1;
}
#frames.cms-editmode .cms-collection-add{display:flex;}
#frames .cms-collection-add:hover{opacity:.85;}

.cms-ll-controls{gap:12px;margin-top:14px;flex-wrap:wrap;justify-content:center;}
.cms-ll-controls button{
  background:none;border:1px solid var(--khaki);color:var(--khaki);
  border-radius:16px;padding:6px 14px;font-family:var(--sans);font-size:12px;cursor:pointer;
}
.cms-ll-controls button:hover{background:var(--khaki);color:#fff;}